vue动态路由

// Vue 动态路由示例代码

// 定义路由配置
const routes = [
  {
    path: '/user/:id', // 动态路径参数 :id
    component: User // 对应的组件
  },
  {
    path: '/post/:postId/comments/:commentId', // 多个动态路径参数
    component: Comments // 对应的组件
  }
];

// 创建路由实例
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

// 在组件中使用动态路由参数
const User = {
  template: '<div>User ID: {{ $route.params.id }}</div>', // 动态获取参数
  created() {
    console.log(this.$route.params.id); // 打印动态参数
  }
};

// 导航守卫，可以在这里处理一些逻辑，比如权限验证等
router.beforeEach((to, from, next) => {
  // to 和 from 都是路由对象，next 是一个函数，必须调用它来继续导航
  console.log('Navigating to:', to.path);
  next(); // 确保调用 next() 来继续导航
});

解释说明：

1. 动态路径参数：在 path 中使用 :paramName 的形式定义动态路径参数。例如 /user/:id 表示 /user/123、/user/456 等都可以匹配到这个路由。

2. 多个动态路径参数：可以在路径中定义多个动态参数，如 /post/:postId/comments/:commentId，这样可以根据不同的参数值加载不同的内容。

3. 访问动态参数：在组件中可以通过 this.$route.params 访问动态参数。例如，在 User 组件中通过 this.$route.params.id 获取用户 ID。

4. 导航守卫：router.beforeEach 是一个全局前置守卫，可以在每次路由切换前执行一些逻辑，比如权限验证或日志记录。