Vue路由传参详解（params 与 query ）
前言
路由传参分为 params 传参与 query 传参
params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效
query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用）。
==name是什么呢？name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”==
const routes = [
{
path:"/login",
component:Login
},
{
name:'home'
path:'/home',
component:'Home'
}
]
方式一：通过 params 传参
编程式
data:{
username: ''
},
login() {
...
this.$router.push({
name: 'home', //注意使用 params 时一定不能使用 path
params: { username: this.username },
})
}
声名式
<router-link :to="{ name: 'home', params: { username: username } }">
取值：this.$route.params.username
方式二
编程式
data:{
username: ''
},
login() {
this.$router.push({
path: '/home',
query: { username: this.username },
})
}
声明式
<router-link :to="{ path: '/home', query: { username: username } }">
取值：this.$route.query.username
params 传参后，刷新页面会失去拿到的参数。所以路由参数要修改为 '/login/:username'（官方称为动态路由）
const routes = [
{
path: '/login',
component: Login
},
{
path: '/home/:username',
name: '/home',
component: Home
}