[JavaScript知识库]vue中路由的几种传参方式

首先声明式导航（如下图）本质就是调用了router.push来实现的，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

<router-link :to="...">

今天朱老板带大家简单的看下router.push（）的传参方法。

首先他能传参的范围是一个描述地址的对象或者字符串，如下图

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

这里可以看到，在传递的对象中，可以包含 query和params两个属性，这两个属性就是传参的关键了。下面说下他们的区别之处。

首先需要了解两个概念，第一，我们可以通过name或者path来定义地址，但是如果提供了?path的话，params?会被忽略。如下图

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

所以通过params传参的话，你需要提供路由的?name?或手写完整的带有参数的?path

其二了解下动态路由，如下图

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

一个“路径参数”使用冒号?:?标记。当匹配到一个路由时，参数值会被设到?this.$route.params，

?

那么我总结下两种传参的同异处：

params传参可以通过编程式router.push（）参数对象中携带params属性来传参，但是此种方式不可以使用path定义路径，否则params会被忽略，而且此类传参因为不会拼接到地址上，所以刷新会导致参数丢失。

params也可以通过动态路由的形式进行传参，此时参数会被拼接到地址上，所以刷新不会丢失

query传参也可以通过编程式router.push（）参数对象中携带query属性来传参，此时用path或name定义路径均可，同时都会进行路径拼接，所以刷新数据不会丢失。

如有错误请指出，谢谢！