在使用vue-router的时候遇到了一些小问题,在这里总结一下
官方文档 router-link-active----激活 class 类名 router-link-exact-active----精确激活的默认的 class 第一个的问题是如果把网站根目录设置为首页,那么不论在那个路由里面都会匹配的首页路由 第二个的问题是如果没有嵌套路由的情况下,没问题,但是如果有嵌套路由,那么exact-active是匹配不到嵌套路由的子路由的
{
path: '/',
name: '',
component: indexPage,
meta:{active:1},
children:[
{
path:'/',//list
name:'indexList',
component:indexList,
meta:{active:1},
},
{
path:'/edit/:blogId',//edit
name:'indexEdit',
component:indexEdit,
meta:{active:1,needLogin:true},
},
{
path:'/detail/:blogId',//detail
name:'indexDetail',
component:indexDetail,
meta:{active:1},
}
],
}
data () {
return {
navs:[
{page:'intro',url:'/intro',names:'页面1',isAct:false},
{page:'index',url:'/',names:'页面2',isAct:false},
{page:'write',url:'/write',names:'页面3',isAct:false},
]
}
},
watch:{
'$route'(to,from){
for(var i=0;i<this.navs.length;i++){
this.navs[i].isAct=false
}
if(this.$route.meta.active||this.$route.meta.active==0){ //在没有active的页面不高亮显示
this.navs[to.meta.active].isAct=true
}
}
},
这样确实是解决了路由高亮的问题,但是这肯定不是最终的解决方案,不过是取巧罢了,因为是抽空写的小demo,没有更深入的测试,肯定是有问题存在的,希望有这方面思路的大神能指点一二
首先说下遇到的问题 1.进入嵌套路由,当前父导航无法高亮显示 2.页面刷新后导航重置问题 3.在嵌套路由刷新页面也会导致导航重置 网上看了也有一些解决方案,有些人用vuex去控制。。。感觉没必要,说下我自己总结的办法
cnpm install element-ui --save
// element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
element导航组件地址 我这里用的是第二个侧栏组件
建议先看下文档的属性说明,更改三个默认属性值
element:{
//是否只保持一个子菜单的展开
opened:true,
//是否使用 vue-router 的模式
//启用该模式会在激活导航时以 index 作为 path 进行路由跳转
router:true,
//当前激活菜单的 index
active:''
}
//绑定到对应的属性
:default-active="element.active"
class="el-menu-vertical-demo"
@open="handleOpen"
:router="element.router"
这里让导航默认去读路由的url来匹配对应的当前路由
mounted(){
this.element.active=this.$route.fullPath
},
这样一来,随便切换路由都会对应高亮当前路由,刷新页面后也是没问题的 接下来加入一个嵌套路由,当加入嵌套路由的时候,当前路由也能正确的匹配,但是当停留在当前嵌套路由刷新页面的时候,就匹配不到了
mounted(){
// this.element.active=this.$route.fullPath
this.element.active=this.$route.matched[0].path
},
fullPath匹配的是当前路由的完整路径,在router属性中,matched属性更适合用来做路由匹配。然后刷新页面,在嵌套路由中也不会丢失当前路由的active了~~