vue的二级页面导航栏如何高亮?

Question

比如导航栏有两个按钮,地址如下:

www.xxx.com/page1/A.vue
www.xxx.com/page2/B.vue

这时候A和B里面还有二级页面叫A1.vue和B1.vue

www.xxx.com/page1/subpage1/A1.vue
www.xxx.com/page2/subpage2/B1.vue

然后导航栏的代码如下.点击会高亮(背景加红色).

<ul>
     <li>
         <nuxt-link to="/subpage1/A">A</nuxt-link>
     </li>
     <li>
         <nuxt-link to="/subpage2/B">B</nuxt-link>
     </li>
</ul>

现在的问题是当进入A1或B1页面的导航栏并没有高亮,现在我判断了地址栏带有page1或page2就给对应的高亮,但是会在页面加载完成后才出现高亮,效果不尽人意;

请教有什么办法在子页面一开始加载就存在高亮吗?

Answer 1

你可以通过使用json的方式配置这块的路由
如：

{
  name: 'two',
  path: '/two',
  meta: {
    level:'two'
  },
  component: () => import('pages/B.vue')
},

然后通过beforeRouterEnter判断路由，然后加class
把

<ul>
 <li>
     <nuxt-link to="/subpage1/A">A</nuxt-link>
 </li>
 <li>
     <nuxt-link to="/subpage2/B">B</nuxt-link>
 </li>
</ul>

这个也动态渲染