VUE_嵌套路由(Router)

什么是嵌套路由？

顾名思义，就是在路由内又嵌套了一层路由

 

1.编写需要嵌套的路由组件

2.在路由器配置嵌套路由组件

/*
路由器模块
 */
import Vue from  "vue"
import VueRouter from "vue-router"

import About from "../views/About.vue"  //路由组件
import Home from "../views/Home.vue"    //路由组件
import Message from "../views/Message.vue"
import News from "../views/News.vue"


Vue.use(VueRouter)

export default new VueRouter({//向外暴露路由器对象
  //配置N个路由
  routes:[
    {
      path:"/about",
      component:About
    },
    {
      path:"/home",//path最左侧的/代表根路径
      component:Home,
      children:[//嵌套路由
        {
          path:"/home/news",//具体写法
          component:News
        },
        {
          path:"message",//简化写法
          component:Message
        },
        {
          path:"",
          redirect:"/home/news"
        }
      ]
    },
    {
      path:"/",
      redirect:"/about"
    }
  ]
})

3.在被嵌套的路由内引入嵌套路由

<template>
    <div>
      <h2>Home</h2>
      <div>
        <ul class="nav nav-tabs">
            <router-link to="/home/news">News</router-link>
            <router-link to="/home/message">Message</router-link>
        </ul>
        <div>
          <router-view></router-view>
          <hr>
        </div>
      </div>
    </div>
</template>

<script>
  export default {// 向外默认暴露一个出口(对象)

  };
</script>

<style>

</style>

4.完工！