場景描述：在頁面中存在頂部導(dǎo)航和左側(cè)導(dǎo)航，左側(cè)導(dǎo)航和右側(cè)內(nèi)容區(qū)使用了命名視圖實現(xiàn)，點擊左側(cè)導(dǎo)航的鏈接時，右側(cè)內(nèi)容區(qū)相應(yīng)顯示不同組件內(nèi)容。問題：在當(dāng)前鏈接手動刷新瀏覽器（例如：瀏覽器地址為/enterprise/list），頂部導(dǎo)航激活項還原到初始狀態(tài)（這里默認是“工作臺”項）。

原理：每次刷新都會重新實例化Vue，也就是會調(diào)用created方法。

<template><el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true"> 　　　 <el-menu-item index="/">工作臺</el-menu-item><el-menu-item index="/enterpriseManager">企業(yè)管理</el-menu-item><el-menu-item index="/orderManager">訂單管理</el-menu-item><el-menu-item index="/systemManager">系統(tǒng)管理</el-menu-item></el-menu> </template> <script> export default {name: 'app',data () {return {defaultActiveIndex: "/"}},created() {// 組件創(chuàng)建完后獲取數(shù)據(jù)，// 此時 data 已經(jīng)被 observed 了this.fetchData()},methods: {handleSelect(index){this.defaultActiveIndex = index;},jumpTo(url){this.defaultActiveIndex = url;this.$router.push(url); //用go刷新 },fetchData () {var cur_path = this.$route.path; //獲取當(dāng)前路由var routers = this.$router.options.routes; // 獲取路由對象var nav_type = "";for(var i=0; i<routers.length; i++){var children = routers[i].children;if(children){for(var j=0; j<children.length; j++){var grand_children = children[j].children;if(grand_children){for(var k=0; k<grand_children.length; k++){if(grand_children[k].path == cur_path){nav_type = routers[i].type;break;}}}}}}if(nav_type == "home"){this.defaultActiveIndex = "/";} else if(nav_type == "enterprise"){this.defaultActiveIndex = "/enterpriseManager";}}}watch: {'$route': 'fetchData'} } </script>

附上router配置格式：

export default [ {path: '/',type: 'home', //自定義type區(qū)分不同模塊菜單name: 'home',redirect: '/dashboard',component: Home,menuShow: true,children: [{path: '/dashboard',component: HomeNav,name: 'dashboard',leaf: true, // 只有一個節(jié)點iconCls: 'icon-home', // 圖標(biāo)樣式classmenuShow: true,children: [{ path: '/dashboard', component: Dashboard, name: '首頁', menuShow: true }]},{path: '/mySet',component: HomeNav,name: '我的設(shè)置',iconCls: 'el-icon-menu',menuShow: true,children: [{ path: '/mySet/plan', component: Plan, name: '行程計劃', menuShow: true },{ path: '/mySet/maillist', component: Maillist, name: '通訊錄', menuShow: true }]}] }, {path: '/enterpriseManager',type: 'enterprise',name: 'enterprise',component: Home,redirect: '/enterprise/list',menuShow: true,children: [{path: '/enterpriseList',component: EnterpriseNav,name: 'enterpriseList',leaf: true, // 只有一個節(jié)點iconCls: 'icon-home', // 圖標(biāo)樣式classmenuShow: true,children: [{ path: '/enterprise/list', component: EnterpriseList, name: '企業(yè)列表', menuShow: true }]},{path: '/enterpriseAdd',component: EnterpriseNav,name: 'enterpriseAdd',leaf: true, // 只有一個節(jié)點iconCls: 'el-icon-menu',menuShow: true,children: [{ path: '/enterprise/add', component: EnterpriseAdd, name: '企業(yè)添加', menuShow: true }]},{path: '/enterpriseValidate',component: EnterpriseNav,name: 'enterpriseValidate',leaf: true, // 只有一個節(jié)點iconCls: 'el-icon-menu',menuShow: true,children: [{ path: '/enterprise/validate', component: EnterpriseValidate, name: '企業(yè)認證', menuShow: true }]}] } ]

?

轉(zhuǎn)載于:https://www.cnblogs.com/yeqrblog/p/8961707.html

總結(jié)

以上是生活随笔為你收集整理的Vue页面手动刷新，导航栏激活项还原到初始状态问题解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。