Vue教程81--认识嵌套路由

认识嵌套路由

• 嵌套路由是一个很常见的功能

  • 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
  • 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

• 路径和组件的关系如下:

  

• 实现嵌套路由有两个步骤:

  • 创建对应的子组件, 并且在路由映射中配置对应的子路由
  • 在组件内部使用<router-view>标签

• router/index.js

   import Vue from 'vue'
   import Router from 'vue-router'
   import Home from "../components/Home";
   import About from "../components/About";
   import User from "../components/User";
   import News from "../components/homenews"
   import Message from "../components/homemessage"
   ​
   Vue.use(Router)
   ​
   const routes = [
     {
       path:"/",
       redirect:"/home"
     },
     // 增加children来增加嵌套路由
     {
       path:"/home",
       component:Home,
       children:[
         {
           path:'',
           redirect:"news"
         },
         {
           path:"news",
           component:News
         },
         {
           path:"message",
           component:Message
         }
       ]
     }
     ,
     {
       path:"/about",
       component:About
     }
     ,
     {
       path:"/user/:userId",
       component:User
     }
   ]
   ​
   ​
   const router = new Router({
     routes,
     mode:"history",
     linkActiveClass:"active"
   })
   ​
   export default router
  

• home.vue

   <template>
     <div>
       <h2>首页</h2>
       <p>这是首页的内容，哈哈哈哈</p>
       <router-link to="/home/news" tag="button" replace>新闻</router-link>
       <router-link to="/home/message" tag="button" replace>信息</router-link>
       <router-view></router-view>
     </div>
   </template>
   ​
   <script>
   export default {
     name: "home"
   }
   </script>
   ​
   <style scoped>
   ​
   </style>
  

• homenews.vue

   <template>
     <div>
       <ul>
         <li>新闻1</li>
         <li>新闻2</li>
         <li>新闻3</li>
         <li>新闻4</li>
         <li>新闻5</li>
       </ul>
     </div>
   </template>
   ​
   <script>
   export default {
     name: "homenews"
   }
   </script>
   ​
   <style scoped>
   ​
   </style>
  

• homemessage.vue

   <template>
     <div>
       <ul>
         <li>信息1</li>
         <li>信息2</li>
         <li>信息3</li>
         <li>信息4</li>
         <li>信息5</li>
       </ul>
     </div>
   </template>
   ​
   <script>
   export default {
     name: "homemessage"
   }
   </script>
   ​
   <style scoped>
   ​
   </style>
  

运行效果如下：