Vue.js 嵌套路由和动态路由

Vue.js 嵌套路由和动态路由

在 Vue.js 开发中，Vue Router 是官方提供的路由管理器，用于构建单页应用（SPA）。它支持嵌套路由和动态路由，帮助开发者构建复杂的应用结构。

嵌套路由

嵌套路由允许在路由配置中定义子路由，从而在组件中嵌套显示其他组件。这对于构建具有多层次结构的界面非常有用。

配置嵌套路由

1. 定义父组件和子组件：

   <!-- ParentComponent.vue -->
   <template>
     <div>
       <h2>父组件</h2>
       <router-view></router-view> <!-- 子路由组件将渲染在这里 -->
     </div>
   </template>
   

   <!-- ChildComponent.vue -->
   <template>
     <div>
       <h3>子组件</h3>
     </div>
   </template>
   

2. 在路由配置中使用 children 属性定义嵌套路由：

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import ParentComponent from './components/ParentComponent.vue';
   import ChildComponent from './components/ChildComponent.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
       path: '/parent',
       component: ParentComponent,
       children: [
         {
           path: 'child',
           component: ChildComponent,
         },
       ],
     },
   ];
   
   const router = new VueRouter({
     routes,
   });
   
   export default router;
   

在上述配置中，访问 /parent/child 时，ParentComponent 中的 <router-view> 会渲染 ChildComponent。

动态路由

动态路由允许在路径中使用参数，从而匹配多个路由。这对于处理具有相似结构但内容不同的页面非常有用。

配置动态路由

1. 定义动态路由：

   const routes = [
     {
       path: '/user/:id',
       component: UserComponent,
     },
   ];
   

   在上述配置中，/user/:id 中的 :id 是一个动态参数，可以匹配 /user/1、/user/2 等路径。

2. 在组件中访问动态参数：

   <!-- UserComponent.vue -->
   <template>
     <div>
       <h2>用户 ID: {{ userId }}</h2>
     </div>
   </template>
   
   <script>
   export default {
     computed: {
       userId() {
         return this.$route.params.id;
       },
     },
   };
   </script>
   

通过上述配置，UserComponent 可以根据路由参数显示不同的内容。

总结

• 嵌套路由：通过在路由配置中使用 children 属性，可以在父组件中嵌套显示子组件，构建多层次的界面结构。
• 动态路由：通过在路径中使用动态参数（如 :id），可以匹配多个具有相似结构的路由，并在组件中根据参数显示不同的内容。
  合理使用嵌套路由和动态路由，可以使 Vue.js 应用的路由配置更加灵活和强大。