路由（多级）嵌套

1. 多级路由在配置时使用children配置项

2. 配置子路由时，路径项中不再添加/

   router文件中的index.js文件

   //该文件用于创建整个应用的路由器
   import VueRouter from "vue-router";
   import Home from "@/pages/Home.vue";
   import Message from "@/pages/Message.vue";
   import News from "@/pages/News.vue";
   // 创建并暴露一个路由器
   export default new VueRouter({
       routes:[
           {
               path:'/home',
               component:Home,
               children:[
                   {
                       path:'message',
                       component:Message
                   },
                   {
                       path:'news',
                       component:News
                   }
               ]
           },
       ]
   })
   ​
   

3. 页面跳转时需配置完整路由路径

   Home页面组件

   <script>
   import {defineComponent} from 'vue'
   ​
   export default defineComponent({
       name: "Home"
   })
   </script>
   ​
   <template>
       <div>
           <h2>Home组件内容</h2>
           <div>
               <ul class="nav nav-tabs">
                   <li>
                       <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
                   </li>
                   <li>
                       <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
                   </li>
               </ul>
               <router-view/>
           </div>
       </div>
   </template>
   

• 新建Message文件（pages文件夹中）

  Message文件

  <script>
  import {defineComponent} from 'vue'
  ​
  export default defineComponent({
      name: "Message"
  })
  </script>
  ​
  <template>
      <div>
          <ul>
              <li>
                  <a href="/message1">message001</a>&nbsp;&nbsp;
              </li>
              <li>
                  <a href="/message2">message002</a>&nbsp;&nbsp;
              </li>
              <li>
                  <a href="/message/3">message003</a>&nbsp;&nbsp;
              </li>
          </ul>
      </div>
  </template>
  

• 新建News文件（pages文件夹中）

  News文件

  <script>
  import {defineComponent} from 'vue'
  ​
  export default defineComponent({
      name: "News"
  })
  </script>
  ​
  <template>
      <ul>
          <li>news001</li>
          <li>news002</li>
          <li>news003</li>
      </ul>
  </template>