element导航问题总结

RtyXmd

发布于 2018-08-30 14:43:32

2.1K0

发布于 2018-08-30 14:43:32

文章被收录于专栏：前端vue前端vue

在使用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了~~

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.05.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度