vue+element-ui有效管理导航页(NavMenu)的当前页(active)
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
在用vue+element-ui开发时,需要导航页的当前选中项与实际显示页面对应。
通过控件操作的跳转是可以正常对应的。但是直通地址访问时,页面显示ok,控件的当前项毫无变化。
针对这个问题网上也查了些资料,解决方案归纳为两类:
1,用全局变量绑定当前页面,页面切换时变更该全局变量来实现当前项的变更。
这种方法完全没去尝试过,不知道是否可行。
我采用的是第二种方法。
2,通过获取route的path参数来修改当前项。
updated() {//路径及按键操作时调用
this.updateForcus();
},
mounted() {//载入时调用,F5刷新会起效
this.updateForcus();
},
methods: {
updateForcus() {
var path = this.$route.path;
if (path=="/content/cabList" || path=="/content/curCabStatus") {
this.navselected = "/content/cabList";
} else if (path == "/content/boxList") {
this.navselected = "/content/boxList";
} else if (path == "/content/order/current") {
this.navselected = "/content/order/current";
} else if (path == "/content/order/history") {
this.navselected = "/content/order/history";
}
//更新nav的当前active
//经测试F5刷新只会调用mounted,路径访问及鼠标点击只会调用updated。
},
}
updated()会在控件跳转和直接路径访问时被调用。vue的路由跳转就是对当前页面的更新。
mounted()会在F5刷新或第一次访问时被调用。其实就是载入页面的时候会调用mounted挂载页面,F5刷新会触发重新载入。
因此,在两个方法中都加入当前路径检测。
路径检测就很简单了,获取route的path然后经比对后设置el-menu的navselected即可。
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)