路由通过children关键字设置子路由

路由通过children关键字设置子路由"/>

路由通过children关键字设置子路由

路由通过children关键字设置子路由

基本介绍

子路由：

通过children关键字给路由设置子路由。

一般项目开发中，App.vue是根基组件(第1级别)，内部可以有具体业务组件Home.vue，Music.vue，它们是第2级别，根据业务需要，业务组件内部还要做内容分级显示，例如音乐Music.vue下边要求显示香港音乐，大陆音乐等，它们是第3级别组件。

第3级别组件做应用的时候需要设置路由，并且与第2级别组件路由有形成父子关系，故称为子路由。

子路由应用

案例：

​ 给Music组件创建子级组件，同时创建并应用子路由。创建组件切换显示项目，要求有3个级别组件。

• App.vue
  • Home.vue
  • Music.vue
    • Hongkong.vue
    • Dalu.vue

步骤：

1. 创建第3级别的业务组件，在components/yinyue/ 目录下创建Dalu.vue、Hongkong.vue 2个组件，内容分别如下：

   <template><div>大陆系列音乐</div>
   </template>
   

   <template><div>香港系列音乐</div>
   </template>
   

2. 在main.js文件中引入第3级别业务组件，并给Music二级组件通过children关键字配置为子路由。

   // 导入第三层级业务组件
   import Hongkong from './components/yinyue/Hongkong.vue'
   import Dalu from './components/yinyue/Dalu.vue'// 注册路由中的相关组件
   //    路由中有两个组件( <router-link>  <router-view> )被进场使用
   // A. 单独注册
   // Vueponent('router-link',XXX)
   // Vueponent('router-view',XXX)
   // B. 一并注册，一次性把所有的组件都注册好，更高效
   Vue.use(VueRouter) // 插件// 创建一个路由对象
   const router = new VueRouter({// #锚点信息就是路由地址(路由地址不用设置#号，内部已经封装好了)// routes:固定名称，用于设置路由地址(#/xxx) 与组件的对应关系routes:[// {path:路由地址, component:被显示的组件模块}// {path:'路由地址A', redirect:'路由地址B'}  // A 重定向执行 B{path:'/', redirect:'/home'},{path:'/home', component:Home},{// 给当前路由配置子路由，关键字childrenpath:'/music', component:Music,children:[// 设置路由地址与组件对应关系{path:'/music/hongkong',component:Hongkong},{path:'/music/dalu',component:Dalu}]},
   

3. 在Music.vue中设置 切换按钮 和 组件显示占位符。

   <template><div><span>音乐列表展示</span><p><!-- 子路由按钮位置 --><router-link to="/music/hongkong">香港</router-link><router-link to="/music/dalu">大陆</router-link></p><p id="soncont"><!-- 子路由组件显示占位符 --><router-view></router-view></p></div>
   </template>
   

注意：

1. 要通过 children关键字设置子路由。
2. 第三级别组件对应的切换按钮(router-link) 和显示占位符(router-view) 需要在Music.vue组件中设置。
3. 第二级别组件对应的切换按钮(router-link) 和显示占位符(router-view) 需要在App.vue组件中设置。

重定向和按钮高亮

给第三级组件设置重定向 和 按钮激活高亮 效果。

重定向：

在main.js中给子路由配置重定向：

{// 给当前路由 配置子路由，关键字childrenpath:'/music', redirect:'/music/dalu', // A. 子路由重定向配置 推荐component:Music,children:[// 设置路由地址与组件对应关系// {path:'/music', redirect:'/music/dalu'}, // B.子路由重定向配置{path:'/music/hongkong',component:Hongkong},{path:'/music/dalu',component:Dalu}]},

按钮高亮：

在src/components/Music.vue中配置，router-link-active设置按钮高亮。

<style lang="less" scoped>
/* 给激活按钮设置css高亮效果 */
.router-link-active{color:red;
}
</style>

注意：

1. 子路由设置重定向有两种方式：父路由中或子路由中都可以。Music 和 children 内部都可以设置重定向。
2. 父级路由的component:Music 成员不能去除。