使用Vue Router传值的一些问题

前言

最近在写项目期间，频繁用到路由传值，特在此记录路由传值的一些要点，众所周知，VueRouter中传参分为params和query两种传参方式，特于此记录下两者的异同

params传参

params传参，就好比post请求，其参数不会显示在地址栏中，其用法如下所示

声明式

<!-- name为组件路由名，params为参数 -->
<router-link :to="{ name: 'home', params: { username: username } }">

编程式

data:{
 username: ''
},
login() {
  this.$router.push({
    name: 'home', 
    params: { username: this.username },
  })
}

注意：使用params传参时必须配合name使用，使用path将无效(亲测)

params传参在使用时，如果用户刷新了页面，那么参数则会失效，解决上述问题的办法是使用官方的动态路由，如下所示，在路由配置中添加后置参数

const routes = [
  {
   path: '/home/:username',
   name: '/home',
   component: Home
  }

如上所示，虽然解决了刷新丢参的问题，但是参数也会显性的展示在地址栏中，像http://localhost:4000/home/admin(参数)这样,因此在实际开发中还是要根据参数的重要性来决定用不用这种方法，好了下面讲一下query传参

取参

this.$route.params

注意此处是$route,而非$router

query传参

声明式

和params传参仅差属性名不同，将params改为query即可

<!-- name为组件路由名，query为参数 -->
<router-link :to="{ name: 'home', query: { username: username } }">

编程式

data:{
 username: ''
},
login() {
  this.$router.push({
    name: 'home', 
    //path:'/home',//亲测两者都可以
    query: { username: this.username },
  })
}

注意：使用query传参时虽然不会有页面刷新参数丢失的问题，但是query传参类似于get传参，其参数会展现在地址栏中，因此实际开发也需要根据参数的重要性来使用合理的传参方法

取参

this.$route.query
<!-- 注意此处依然是`$route`而非`$router` -->

补充一点自己在使用query时碰到的问题，传的参数如果是Boolean值，在刷新页面后获得的query参数会变为string类型，比如传参query{isRight:true} 第一次跳转打印console.log(this.$route,query.isRight)的值为true,此时刷新页面再打印出来的值会变为string类型'true'因此我们在传参时应尽量避免直接传递Boolean类型值

（本文完结，感谢阅读）

参考资料

1. VueRouter官方教程 ↩