如何定义vue-router的动态路由？怎么获取传过来的动态参数？

如何定义vue-router的动态路由

我们经常会遇到需要将给定匹配模式的路由映射到同一个组件的情况。例如我们有一个User组件，它应该对所有用户进行渲染，但用户 ID 不同。在 vue-router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数 。

const User = {
  template: '<div>User</div>',
}
//index.js
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

现在像 /users/marry 和 /users/lilei 这样的 URL 都会映射到同一个User路由上,路径参数 用冒号 :表示。

怎么获取传过来的动态参数

上面讲述了如何定义动态路由，那动态路由的参数我们如何在组件中获取到呢？主要有以下两种方法。

params

// 方法1：
<router-link :to="{ name: 'users', params: { id: marry }}">按钮</router-link>
// 方法2：
this.$router.push({name:'users',params:{id:marry}})

以上路由跳转方式获取参数都可以用$route.params.id获取其传递的值

query

// 方法1：
<router-link :to="{ name: 'users', query: { id: 1 }}"></router-link>
// 方法2：
<router-link :to="{ path: '/users', query: { id:2 }}"></router-link>
// 方法3：
this.$router.push({ name: 'users', query:{ id:3 }})
// 方法4：
this.$router.push({ path: '/users', query:{ id:4 }})

以上都可以通过$route.query.id 获取传递的值

需要注意query通过url传参，刷新页面还在，params刷新页面不在了

同一组件如何响应路由参数的变化

使用带有参数的路由时需要注意的是，当用户从/users/marry 和导航到/users/lilei时，相同的组件实例将被重复使用。不过，这也意味着组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话，有两种方法

方法一

你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

方法二

使用 beforeRouteUpdate 导航守卫，它也可以取消导航：

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
  },
}