在使用vue-router的時(shí)候遇到了一些小問(wèn)題，在這里總結(jié)一下

1.自己寫(xiě)導(dǎo)航--利用官方路由做當(dāng)前導(dǎo)航高亮（active）

官方文檔
router-link-active----激活 class 類名
router-link-exact-active----精確激活的默認(rèn)的 class
第一個(gè)的問(wèn)題是如果把網(wǎng)站根目錄設(shè)置為首頁(yè)，那么不論在那個(gè)路由里面都會(huì)匹配的首頁(yè)路由
第二個(gè)的問(wèn)題是如果沒(méi)有嵌套路由的情況下，沒(méi)問(wèn)題，但是如果有嵌套路由，那么exact-active是匹配不到嵌套路由的子路由的

解決辦法是在每一個(gè)路由中自定義一個(gè)meta：active屬性，同一級(jí)的路由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},
        }
      ],
    }

在導(dǎo)航組件中針對(duì)每一次導(dǎo)航切換先拿到meta中的active值，再匹配到對(duì)應(yīng)下標(biāo)的導(dǎo)航中，對(duì)應(yīng)導(dǎo)航的isAct屬性，從而改變當(dāng)前導(dǎo)航的active

data () {
    return {
      navs:[
        {page:'intro',url:'/intro',names:'頁(yè)面1',isAct:false},
        {page:'index',url:'/',names:'頁(yè)面2',isAct:false},
        {page:'write',url:'/write',names:'頁(yè)面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){  //在沒(méi)有active的頁(yè)面不高亮顯示
        this.navs[to.meta.active].isAct=true
      }
    }
  },

這樣確實(shí)是解決了路由高亮的問(wèn)題，但是這肯定不是最終的解決方案，不過(guò)是取巧罷了，因?yàn)槭浅榭諏?xiě)的小demo，沒(méi)有更深入的測(cè)試，肯定是有問(wèn)題存在的，希望有這方面思路的大神能指點(diǎn)一二

2.這里介紹element導(dǎo)航組件的使用問(wèn)題及解決方案

首先說(shuō)下遇到的問(wèn)題
1.進(jìn)入嵌套路由，當(dāng)前父導(dǎo)航無(wú)法高亮顯示
2.頁(yè)面刷新后導(dǎo)航重置問(wèn)題
3.在嵌套路由刷新頁(yè)面也會(huì)導(dǎo)致導(dǎo)航重置
網(wǎng)上看了也有一些解決方案，有些人用vuex去控制。。。感覺(jué)沒(méi)必要，說(shuō)下我自己總結(jié)的辦法

安裝引入element

cnpm install element-ui --save
// element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

element導(dǎo)航組件地址
我這里用的是第二個(gè)側(cè)欄組件

使用側(cè)欄

建議先看下文檔的屬性說(shuō)明，更改三個(gè)默認(rèn)屬性值

element:{
        //是否只保持一個(gè)子菜單的展開(kāi)
        opened:true,  
        //是否使用 vue-router 的模式
        //啟用該模式會(huì)在激活導(dǎo)航時(shí)以 index 作為 path 進(jìn)行路由跳轉(zhuǎn) 
        router:true, 
        //當(dāng)前激活菜單的 index
        active:''
      }
//綁定到對(duì)應(yīng)的屬性
      :default-active="element.active"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      :router="element.router"

這里讓導(dǎo)航默認(rèn)去讀路由的url來(lái)匹配對(duì)應(yīng)的當(dāng)前路由

導(dǎo)航匹配路由url

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

這樣一來(lái)，隨便切換路由都會(huì)對(duì)應(yīng)高亮當(dāng)前路由，刷新頁(yè)面后也是沒(méi)問(wèn)題的
接下來(lái)加入一個(gè)嵌套路由，當(dāng)加入嵌套路由的時(shí)候，當(dāng)前路由也能正確的匹配，但是當(dāng)停留在當(dāng)前嵌套路由刷新頁(yè)面的時(shí)候，就匹配不到了

改變匹配路由的參數(shù)fullPath=>mathed

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

fullPath匹配的是當(dāng)前路由的完整路徑，在router屬性中，matched屬性更適合用來(lái)做路由匹配。然后刷新頁(yè)面，在嵌套路由中也不會(huì)丟失當(dāng)前路由的active了~~