Vue-路由傳參query與params

注明：vue中 $router 和 $route 的區別 

//$router : 是路由操作對象，只寫對象
//$route : 路由信息對象，只讀對象

//操作 路由跳轉
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//讀取 路由參數接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

1、query傳參

query傳參地址使用path（路由地址）和name（路由名稱） 

//傳參，使用path跳轉
this.$router.push({
    path:'/login',
    query: {
        id:'123', 
        name: 'yangj'
    }
})

//路由
import Login from '@/page/Login'     

{
　　path: '/login',
　　name: 'Login',
　　component: 'Login'
}

//接收 
id = this.$route.query.id; name = this.$route.query.name;

//地址欄表現形式     這種方式感覺安全性不好暴露了參數，但是對於對隱私要求不強的頁面可以這么玩
http://localhost:8080/#/Login?id=123&name=yangj

2、params傳參

query傳參地址使用name（路由名稱）

//傳參，使用name跳轉
this.$router.push({
    name:'Login',
    params: {
        id:'123', 
        name: 'yangj'
    }
})
//路由
import Login from '@/page/Login'     
{
　　path: '/login/:id/:name', //這里的參數必須寫（地址欄表現形式1），如果不寫在頁面強制刷新時參數會丟失（地址欄表現形式2）
　　name: 'Login',
　　component: 'Login'
}
//接收 
id = this.$route.params.id; name = this.$route.params.name;

//地址欄表現形式1
http://localhost:8080/#/login/123456/yangj

//地址欄表現形式2
http://localhost:8080/#/login

原文：https://blog.csdn.net/mf_717714/article/details/81945218