Vue点到子路由,父级,无法高亮问题解决

[问题] Vue点到子路由,父级,无法高亮

【原因】多是因为链接简写相对路径没有写完整导致
【解决】把子路由的router-link的to属性里链接写完整、并把router配置文件里path也写完整即可

1. hello.vue

【1】以下是路由链接 注意路径to要加上主组件,这样点到子路由里,主路由设置颜色才不会消失






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状态样式

效果:
Vue点到子路由,父级,无法高亮问题解决_第1张图片

你可能感兴趣的:(Vue点到子路由,父级,无法高亮问题解决)