router 二级 三级嵌套及选中高亮

1.main.js文件下二级路由和三级路由的引入，以及如何定义他们的路径path、名称name、调用组件component、默认展示组件redirect。

• 路由对象数组routes中存放着所有路由的路径和组件。在这里二级路由，以children数组的形式挂在一级路由对象里面，如下所示。
• 三级路由也挂在二级路由对象中的children数组里面。
• redirect挂在拥有二级路由的一级组件里表示，当我们打开这个一级路由时，默认展示redirect的路径值，也就是他其中一个二级路由。

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'
// 二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'
//三级路由
import Phone from './components/about/contact/Phone'
import PersonName from './components/about/contact/PersonName'
Vue.use(VueRouter)

const routes = [
  {path:'/',name:"homeLink",component:Home},
  {path:'/menu',name:"menuLink",component:Menu},
  {path:'/admin',name:"adminLink",component:Admin},
  {path:'/about',name:"aboutLink",component:About,redirect:'/about/contact',children:[
    {path:'/about/contact',name:"contactLink",redirect:'/about/contact/personname',component:Contact,children:[
      {path:'/about/contact/phone',name:'phoneNumber',component:Phone},
      {path:'/about/contact/personname',name:'personName',component:PersonName},
    ]},
    {path:'/about/delivery',name:"deliveryLink",component:Delivery},
    {path:'/about/history',name:"historyLink",component:History},
    {path:'/about/orderingGuide',name:"orderingGuideLink",component:OrderingGuide},
  ]},
  {path:'/login',name:"loginLink",component:Login},
  {path:'/register',name:"registerLink",component:Register},
  {path:'*',redirect:'/'},
];
const router = new VueRouter({
  routes,
  mode:"history"
})

new Vue({
  router,
  el: '#app',
  render: h => h(App)
})

2. 如上所示，contact、delivery、history、orderingGuide二级路由挂在一级路由about下。phone、personname三级路由挂在二级路由contact下面。

about组件代码如下

<template>
    <div>
        <div class="row mb-5">
            <div class="col-4">
                <!-- 导航 -->
                <div class="list-group mb-5">
                    <router-link tag="li" class="nav-link" :to="{name:'historyLink'}">
                        <a class="list-group-item list-group-item-action">历史订单</a>
                    </router-link>
                    <router-link tag="li" class="nav-link" :to="{name:'contactLink'}">
                        <a class="list-group-item list-group-item-action">联系我们</a>
                    </router-link>
                    <router-link tag="li" class="nav-link" :to="{name:'orderingGuideLink'}">
                        <a class="list-group-item list-group-item-action">点餐文档</a>
                    </router-link>
                    <router-link tag="li" class="nav-link" :to="{name:'deliveryLink'}">
                        <a class="list-group-item list-group-item-action">快递信息</a>
                    </router-link>
                </div>
            </div>
            <div class="col-8">
                <!-- 导航所对应的内容 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

contact组件代码如下

<template>
    <div class="card text-dark bg-light mb-3">
        <div class="card-header">联系我们</div>
        <div class="card-body">
            <h4 class="card-title">联系我们</h4>
            <p class="card-text">572404261@qq.com</p>
            <router-link :to="{name:'phoneNumber'}">电话</router-link>
            <router-link :to="{name:'personName'}">联系人</router-link>

            <router-view></router-view>
        </div>
    </div>
</template>

作者：祝名
链接：https://www.jianshu.com/p/385d444efbdc
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

--------------------以下内容非转载内容-----------
一、选中样式两种方式：
1、router设置
linkActiveClass：非精确匹配
linkExactActiveClass：精确匹配
2、router-link设置
标签内写入active-class：非精确匹配
加上 exact：精确匹配

使用：
在vue-router中要使用选中样式：

const router = new VueRouter({
  routes,
  mode:"history",
  linkActiveClass:'active'  //设置选中样式class  
})

linkActiveClass：非精确匹配 根目录 to="/" 同时会被点亮，所以需要给根目录加上 exact 精确匹配

<router-link to="/" exact>Home</router-link> |

二、若未出现高亮一般是由于路由路径不对，子路由和router-link路径需写完整。或router-link路径由name代替。