[分享]定义vue动态路由

动态路由是一种处理路由参数的方式，它可以在不写死路由路径时实现动态路径的匹配和传递参数。在Vue中，动态路由允许我们使用$route和$router对象，实现动态匹配路由并进行参数传递。// 路由定义...

动态路由是一种处理路由参数的方式，它可以在不写死路由路径时实现动态路径的匹配和传递参数。在Vue中，动态路由允许我们使用$route和$router对象，实现动态匹配路由并进行参数传递。

// 路由定义
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

// 生命周期钩子：路由参数变化时触发
const User = {
  template: '<div>User {{ $route.params.id }}</div>',
  watch: {
    '$route' (to, from) {
      // 对路由变化做处理...
    }
  }
} 

在上面的代码中，我们定义了一个带参数的路由，即/user/:id，表示当访问/user/1或/user/2时，都会匹配到这个路由。同时，我们还定义了两个子路由，用于匹配/user/:id/profile和/user/:id/posts两个路径。

在路由组件中，我们可以访问$route实例对象，它包含了当前路由的信息，包括路径、参数等。在User组件中，我们使用模板字符串的方式，取到当前的路由参数：$route.params.id。并通过一个watcher，来监听$route的变化，对路由的变化做出处理。

// 路由跳转
<router-link :to="'/user/' + userId + '/profile'">User Profile</router-link>
<router-link :to="'/user/' + userId + '/posts'">User Posts</router-link> 

为了实现路由的跳转，我们可以使用<router-link>组件，在其中设置:to属性，指定跳转的路径。在上面的代码中，我们使用了一个动态路径，即'/user/' + userId + '/profile'，其中的userId是动态传递的参数。

在实际开发中，动态路由拥有着广泛的应用场景，在多个页面间进行无缝的转换，同时实现参数的传递、路由的缓存等。

动态路由的优点在于它使得我们能够更加灵活地控制路由跳转，同时更好地实现路由的复用。当我们需要动态传参时，它能够方便且快速地实现参数的传递。最重要的是，动态路由的高度自由度，能够快速实现页面的切换和跳转。