Vue中导航栏CSS的维护

vue中对于导航链接自动会对激活的链接添加route-active的class,但是在第三方ui组件中需要另外的维护方式。

vue中导航样式的维护

原生的维护方式

在对需要的元素添加后,vue会自动对该元素添加route-active的class,写上对应的css即可

第三方UI组件中

UI组件中路由跳转的特点

  • 在UI组件中,路由的跳转都是使用事件触发路由的编程式路由来导航
  • 激活的CSS使用UI组件的自带样式,不建议再写route-active这个class的样式
  • UI组件中导航样式的激活是基于标签中一条active-name属性(以iview为例)来确定激活的对应目标

使用route.path来维护

要确保样式能在各种情况下正确激活需要在路由发生变化是实时获取对应的path

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<Menu :active-name="activeKey" @on-select="show" >
<Menu-group title="基础管理">

<Menu-item name="/basManage">
<Icon type="document-text"></Icon>
机柜信息管理
</Menu-item>


<Menu-item name="/basManage/baseDevice">
<Icon type="android-list"></Icon>
设备信息管理
</Menu-item>

<Menu-item name="/basManage/baseUser">
<Icon type="android-document"></Icon>
用户信息管理
</Menu-item>

<Menu-item name="/basManage/basePort">
<Icon type="android-document"></Icon>
端口信息管理
</Menu-item>

</Menu-group>
</Menu>

使用一个变量来绑定active-name,之前是在这个单个VUE文件中分别在mounted和menu-item触发时获取path并赋值,但后来发现如果在route-view中使用了keep-alive,mounted这个钩子函数会失效,也就会到时在切换页面时,获取不到正确path.

于是在看在官方的文档后发现$route变量是能够watch的,直接可以在main.js中watch这个route,然后将path维护在Vuex中,然后分发到需要使用的单个VUE文件中

1
2
3
4
5
6
7
8
9
//main.js中
mounted () {
this.$store.commit('setPath',this.$route.path)
},
watch: {
$route () {
this.$store.commit('setPath',this.$route.path)
}
}
1
2
3
4
5
6
//单个vue组件中
computed: {
activeKey () {
return this.$store.getters.getPathState
}
}

这样在每次path变化时都能够的到正确的path,这样也就能激活对应的css了