vue實現跳轉頁面(含帶有參數)

vue實現跳轉頁面(含帶有參數)

• 實現頁面跳轉

  this.$router.push({
      name:'HelloWorld',
  })
  

• 實現頁面跳轉(帶參數)

  this.$router.push({
      name:'HelloWorld',
      params:{"p":2}
  })
  

• 標簽跳轉

  <router-link  :to="{path:'/login'}" ></router-link>
  

• 標簽跳轉(帶參數)

  # 第一種參數
  <router-link :to="'/login/'+123" ></router-link>
  

  # 第二種參數
  <router-link :to="'/login/?uid='+123" ></router-link>
  # 如果多個參數傳值
  <router-link :to="{path:'/login',query:{uid:2,status:0}}" ></router-link>
  

• 接收參數

  # 第一種接收參數  路由地址需配置為 
   {
      path: '/login/:uid',
      name: 'login',
      component: login
    }
  let uid = this.$route.params.uid;
  

  # 第二種接收參數  路由地址需配置為
   {
      path: '/login/',
      name: 'login',
      component: login
    }
  let uid = this.$route.query.uid;