JAVA高级面试进阶训练营视频教程

admin

[问题] 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>

效果：