vue 一级路由二级路由 父子路由高亮

一级路由

<template>
  <div id="app">
    <div>
      <router-link to="/Home">Homerouter-link>|
      <router-link to="/about">Aboutrouter-link>
    div>
    
    <router-view />

  div>
template>

 
.router-link-active {
  color: red;
}

二级路由

<template>
  <div class="home">
    <div class="tabar">
      <router-link to="/Home/tab1" tag="p">标签一router-link>
      <router-link to="/Home/tab2" tag="p">标签二router-link>
    div>
    
    <router-view>router-view>
  div>
template>

路由表

Vue.use(VueRouter)
  const routes = [
    {
      path:"/",
      redirect:"/Home/tab1" //重定向到二级路由位置
    },
  {
    path: '/Home',
    name: 'Home',
    component:Home,
    redirect:"/Home/tab1",
    children:[
      {
        path:"/Home/tab1",
        name:"tab1",
        component:() => import('../views/tab/Tab.vue')
      },
      {
        path:"/Home/tab2",
        name:"tab2",
        component:() => import('../views/tab/Tab2.vue')
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
   
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router