vue中动态路由详解

动态路由是指通过路由参数传递参数，例如在用户访问路径为 /user/:id 时，可以将 :id 作为参数动态传递给路由组件进行处理。Vue.js支持使用冒号 : 来定义动态路由参数，例如：

{
  path: '/user/:id',
  component: User
}

当用户访问路径为 /user/123 时，路由组件会接收一个 $route 对象，其中包含了当前路由的信息，包括动态路由参数。可以通过 $route.params.id 来获取动态路由传递的参数。

使用动态路由时，可以根据实际需要进行参数验证，例如可以在路由的 beforeEnter 钩子函数中验证参数：

{
  path: '/user/:id',
  component: User,
  beforeEnter: (to, from, next) => {
    const userId = to.params.id
    if (!isValidUserId(userId)) {
      // 如果参数不合法，跳转到 404 页面
      next({ path: '/404' })
    } else {
      // 如果参数合法，继续路由跳转
      next()
    }
  }
}

除了在路由定义中进行参数验证之外，也可以在路由组件内通过 watch 监听 $route 对象的变化，根据新的参数重新渲染组件，例如：

export default {
  watch: {
    '$route': {
      handler(to, from) {
        // 根据新的参数重新渲染组件
        this.loadUserData(to.params.id)
      },
      immediate: true // 立即执行一次
    }
  },
  methods: {
    loadUserData(userId) {
      // 根据用户 ID 加载用户数据
    }
  }
}

需要注意的是，在监听 $route 对象时，应该通过 immediate 选项来保证组件在初次挂载时就能够根据当前 URL 参数进行渲染。