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了~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang 解析base64网络传输如何解析

今天在给服务器做压力测试的流程的时候,遇到了个Golang语言的解析问题;涉及到的主要是解析Base64编码问题,同时也看了底层的源码以下是自己实现的解析: ...

4346
来自专栏Modeng的专栏

更好的理解 Script 标签元素

我们在 《Javascript简史》这遍文章中说过,「Javascript」这门语言是由 Netscape开发而来,当初开发的时候为了能让 「Javascrip...

1152
来自专栏疯狂的小程序

微信小程序组件化编程和实践(上)

从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。查看自己使用的小程序基础库版本,可以通过在开发者工具右侧点击详情查看:

8137
来自专栏每日一篇技术文章

weex-26-dom模块

我们经常会看到上图所示的需求,当我们将列表向下滑动一段时间后,想要立刻回到顶部,这个时候就要用到本节所示的功能。

2203
来自专栏从零开始学自动化测试

python测试开发django-7.模板继承

打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了。

933
来自专栏Angular&服务

防止微信小程序页面多次跳转

1003
来自专栏美奔科技

向Windows 服务器传输大文件

https://support.microsoft.com/zh-cn/help/2258090/copying-files-larger-than-2-gb-...

8282
来自专栏谈补锅

免费真机调试 -- Xcode7

  刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是用了一个新的AppID测试了,发现真的可以免费真机调试了呢!...

9753
来自专栏移动开发之家

从Android到React Native开发(三、自定义原生控件支持)

恍惚间3个月过去了,作为揭棺而起的失踪人口,迟来的第三篇,也是react native原生相关的最后的一篇,是时候给收个尾了。这次就不废话了,直接上主题( ̄^ ̄...

521
来自专栏守望轩

Visual Studio 2008 每日提示(二)

#011、 全屏模式 原文地址:http://blogs.msdn.com/saraford/archive/2007/08/09/did-you-know-...

2998

扫码关注云+社区

领取腾讯云代金券