Vue多级路由重定向以及父级样式丢失的问题。

公司整了一下午，被Vue的多级重定向绕晕了。回来静了下，终于解决了。好好记录下来。

先看看html结构图

上面这个是一级路由跳转的；下面这个是二级跳转的；

需要注意：

*** ***上图的标记1，to里加了'/',表示根据根路径跳转的；而下图的标记3，to没有加'/',表示根据当前页面的相对路径跳转的。这里借鉴了这位盆友的关于重定向redirect解读：https://blog.csdn.net/weixin_39168052/article/details/81325641

*** *** 标记2和4的“.router-link-active”配合路由router/index.js里的“linkExactActiveClass”可以解决路由跳转后标题样式生效问题。(每个有路由跳转的router-view页面必须添加.router-link-active样式，否则该页面跳转下的标题不生效，已亲测；路由里必须是linkExactActiveClass，保证跳转后的当前路由样式高亮唯一性)。

路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import left from '@/components/left/left'
import right from '@/components/right/right'
import rightson01 from '@/components/right/rightSon/rightson01'
import rightson02 from '@/components/right/rightSon/rightson02'

Vue.use(Router)

export default new Router({
  linkExactActiveClass: 'active', // 保持要跳转后的路由页面标题高亮
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      redirect: '/left',
      children: [{
        path: 'left',
        component: left
      },
      {
        path: 'right',
        component: right,
        redirect: 'right/rightson01',
        children: [
          {
            path: 'rightson01',
            component: rightson01
          },
          {
            path: 'rightson02',
            component: rightson02
          }
        ]
      }
      ]
    }
  ]
})

下面看效果：

默认进来重定向到左边：

 点击右边到右子1：

点击右边子二，样式也生效了： 

接上图，从右边子2跳回到左边 （此时如果图一里的to没加"/"的话（to="left"）,这时在右边子2点击左边就跳转错误，不显示内容，也不报错。可以自己看url的路由参数变化验证。）

又跳回来了，对吧，我又成功调回左边祖父级路由了。样式也没问题。 

真的没问题了吗？未必，同样是win10系统，今天在公司发现还是存在.router-link-actve造成祖父级标题样式不生效；什么原因了，试了很久，发现还得加上！important权重，不然造成有些电脑不显示。

 

 本文有一个体验需要优化，因为使用了children嵌套，所以当多次点击左边，右边，右边子1，子2等菜单后，想要返回之前的路由页面，也需要多次点击，所以重新写了一篇进行了优化。有兴趣或需要的可以去看看，写的不太详细。