面试题：Vue中如何配置Vue Router的嵌套路由并渲染对应的组件

Question

假设你有一个项目，有一个父路由为'/parent'，在这个父路由下需要有两个子路由'/parent/child1'和'/parent/child2'，并且每个子路由都有对应的组件Child1和Child2。请描述如何在Vue Router中进行配置，以及在父组件模板中如何设置占位符来渲染子组件。

Answer 1

1. Vue Router配置：

   import Vue from 'vue';
   import Router from 'vue-router';
   import Child1 from '@/components/Child1.vue';
   import Child2 from '@/components/Child2.vue';
   
   Vue.use(Router);
   
   export default new Router({
     routes: [
       {
         path: '/parent',
         component: {
           template: `<div><router - view></router - view></div>`
         },
         children: [
           {
             path: 'child1',
             component: Child1
           },
           {
             path: 'child2',
             component: Child2
           }
         ]
       }
     ]
   });
   

2. 父组件模板设置占位符： 在父组件模板中，通过<router - view></router - view>来作为子组件的占位符，用于渲染匹配到的子路由对应的子组件。例如，父组件的模板如下：

   <template>
     <div>
       <h1>Parent Component</h1>
       <router - view></router - view>
     </div>
   </template>