公司整了一下午,被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等菜单后,想要返回之前的路由页面,也需要多次点击,所以重新写了一篇进行了优化。有兴趣或需要的可以去看看,写的不太详细

Logo

前往低代码交流专区

更多推荐