Vue點到子路由，父級，無法高亮問題解決

[問題] Vue點到子路由，父級，無法高亮

【原因】多是因為鏈接簡寫相對路徑沒有寫完整導致
【解決】把子路由的router-link的to屬性里鏈接寫完整、並把router配置文件里path也寫完整即可

1. hello.vue

【1】以下是路由鏈接 注意路徑to要加上主組件，這樣點到子路由里，主路由設置顏色才不會消失

<template>
  <div>
    <div id='left'>
      <h1>hello子組件</h1>
      <!-- 【1】以下是路由鏈接 注意路徑to要加上主組件，這樣點到子路由里，主路由設置顏色才不會消失-->
      <router-link to="/hello/heChild/hello1">hellow1</router-link><br/>
      <router-link to="/hello/heChild/hello2">hellow2</router-link><br/>
      <router-link to="/hello/heChild/hello3">hellow3</router-link><br/>
    </div>

    <div id='right'>
      <!-- 點路由后，其視頻插入的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default{
    name:'hello',
    data(){
      return{}
    }
  }
</script>

<style scoped>
  /* 對頁面進行布局 */
  #left {
    float:left;
    width:280px;
    min-height: 700px;
    background: lightskyblue;
  }

  #right {
    width:100%;
    min-height:700px;
  }
</style>

2. router.js

重點：【1】-【3】

import Vue from 'vue'
import VueRouter from 'vue-router' //引入路由
import Parent from './components/parent.vue'//引入組件
import Hello from './components/hello.vue'//引入組件2

import Hello1 from './components/heChild/hello1.vue'//以下3個為引入對應的子組件
import Hello2 from './components/heChild/hello2.vue'
import Hello3 from './components/heChild/hello3.vue'

import Wa from './components/wa.vue' //引入第3個組件

Vue.use(VueRouter)//使用路由

export default new VueRouter({
linkActiveClass:'active',//【0】設置路由鏈接處理激活狀態的style樣式class名(默認值: "router-link-active"

)
  routes: [
    {
    path: "/",
    name:'parent',
    component:Parent ,
    },
    //【1】帶子路由的hello組件配置開始
    {
    path: "/hello",
    name:'hello',
    component:Hello ,
    redirect:'/hello/heChild/hello1',//【2】路徑要寫完整前面帶上主路由 /hello/子路由路徑/子路由
    //【3】子路由配置開始
      children:[{
          path:'/hello/heChild/hello1',//【4】子路由，注意路徑
          name:'hello1',
          component:Hello1,
        },
        {
          path:'/hello/heChild/hello2',//【5】子路由，注意路徑
          name:'hello2',
          component:Hello2,
        },
        {
          path:'/hello/heChild/hello3',// 【6】子路由，注意路徑
          name:'hello3',
          component:Hello3,
        }]
    },
    {
      path: "/wa/:count/:name",
      name:'wa',
      component:Wa,
    },

]
})

3. App.vue里設置全局，路由處於active狀態樣式

<style>
.active {
  color:red;
}
</style>

效果：