element导航问题总结

在使用vue-router的时候遇到了一些小问题，在这里总结一下

1.自己写导航--利用官方路由做当前导航高亮（active）

官方文档
router-link-active----激活 class 类名
router-link-exact-active----精确激活的默认的 class
第一个的问题是如果把网站根目录设置为首页，那么不论在那个路由里面都会匹配的首页路由
第二个的问题是如果没有嵌套路由的情况下，没问题，但是如果有嵌套路由，那么exact-active是匹配不到嵌套路由的子路由的

解决办法是在每一个路由中自定义一个meta：active属性，同一级的路由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},
        }
      ],
    }

在导航组件中针对每一次导航切换先拿到meta中的active值，再匹配到对应下标的导航中，对应导航的isAct属性，从而改变当前导航的active

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，没有更深入的测试，肯定是有问题存在的，希望有这方面思路的大神能指点一二

2.这里介绍element导航组件的使用问题及解决方案

首先说下遇到的问题
1.进入嵌套路由，当前父导航无法高亮显示
2.页面刷新后导航重置问题
3.在嵌套路由刷新页面也会导致导航重置
网上看了也有一些解决方案，有些人用vuex去控制。。。感觉没必要，说下我自己总结的办法

安装引入element

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来匹配对应的当前路由

导航匹配路由url

mounted(){
    this.element.active=this.$route.fullPath
  },

这样一来，随便切换路由都会对应高亮当前路由，刷新页面后也是没问题的
接下来加入一个嵌套路由，当加入嵌套路由的时候，当前路由也能正确的匹配，但是当停留在当前嵌套路由刷新页面的时候，就匹配不到了

改变匹配路由的参数fullPath=>mathed

mounted(){
    // this.element.active=this.$route.fullPath
    this.element.active=this.$route.matched[0].path
  },

fullPath匹配的是当前路由的完整路径，在router属性中，matched属性更适合用来做路由匹配。然后刷新页面，在嵌套路由中也不会丢失当前路由的active了~~