Vue頁(yè)面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)
場(chǎng)景描述:在頁(yè)面中存在頂部導(dǎo)航和左側(cè)導(dǎo)航,左側(cè)導(dǎo)航和右側(cè)內(nèi)容區(qū)使用了命名視圖實(shí)現(xiàn),點(diǎn)擊左側(cè)導(dǎo)航的鏈接時(shí),右側(cè)內(nèi)容區(qū)相應(yīng)顯示不同組件內(nèi)容。問(wèn)題:在當(dāng)前鏈接手動(dòng)刷新瀏覽器(例如:瀏覽器地址為/enterprise/list),頂部導(dǎo)航激活項(xiàng)還原到初始狀態(tài)(這里默認(rèn)是“工作臺(tái)”項(xiàng))。
原理:每次刷新都會(huì)重新實(shí)例化Vue,也就是會(huì)調(diào)用created方法。
<template> <el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true"> <el-menu-item index="/">工作臺(tái)</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ù), // 此時(shí) 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; // 獲取路由對(duì)象 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, // 只有一個(gè)節(jié)點(diǎn) iconCls: 'icon-home', // 圖標(biāo)樣式class menuShow: true, children: [ { path: '/dashboard', component: Dashboard, name: '首頁(yè)', menuShow: true } ] }, { path: '/mySet', component: HomeNav, name: '我的設(shè)置', iconCls: 'el-icon-menu', menuShow: true, children: [ { path: '/mySet/plan', component: Plan, name: '行程計(jì)劃', 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, // 只有一個(gè)節(jié)點(diǎn) iconCls: 'icon-home', // 圖標(biāo)樣式class menuShow: true, children: [ { path: '/enterprise/list', component: EnterpriseList, name: '企業(yè)列表', menuShow: true } ] }, { path: '/enterpriseAdd', component: EnterpriseNav, name: 'enterpriseAdd', leaf: true, // 只有一個(gè)節(jié)點(diǎn) iconCls: 'el-icon-menu', menuShow: true, children: [ { path: '/enterprise/add', component: EnterpriseAdd, name: '企業(yè)添加', menuShow: true } ] }, { path: '/enterpriseValidate', component: EnterpriseNav, name: 'enterpriseValidate', leaf: true, // 只有一個(gè)節(jié)點(diǎn) iconCls: 'el-icon-menu', menuShow: true, children: [ { path: '/enterprise/validate', component: EnterpriseValidate, name: '企業(yè)認(rèn)證', menuShow: true } ] } ] } ]
補(bǔ)充知識(shí):vue手動(dòng)刷新視圖以及其他小問(wèn)題
最近把手頭上一個(gè)使用angularJS+jquery各種七七八八組件寫的頁(yè)面拿vue+elementUI重寫了一邊, 真是極度絲滑, 記錄一些vue和elementUI的小問(wèn)題
1.如果vue中的數(shù)據(jù)結(jié)構(gòu)比較龐大的話, 十分有可能會(huì)出現(xiàn)model更新而視圖不更新/model和視圖都不更新也不報(bào)錯(cuò)的情況, 此時(shí)需要手動(dòng)刷新vue的數(shù)據(jù), 在change或click事件中, 使用this.$forceUpdate()手動(dòng)刷新視圖
//像這樣 changeSef: function () { //手動(dòng)刷新視圖 var that = this; that.$forceUpdate(); },
2.在vue中使用setTimeout
//錯(cuò)誤示范 setTimeout(bidOrderInit, 200); //上面那樣是不行的,網(wǎng)上查了下, 大致是說(shuō)在setTimeout中this指向window對(duì)象, //于是乎被定時(shí)的方法中就使用不到vue的this對(duì)象了 //正確示范 //可以無(wú)視對(duì)ie的支持時(shí) setTimeout(()=> { this.bidOrderInit(); }, 200); //需要兼容ie時(shí) setTimeout(function () { this.bidOrderInit(); }, 200);
以上這篇Vue頁(yè)面手動(dòng)刷新,實(shí)現(xiàn)導(dǎo)航欄激活項(xiàng)還原到初始狀態(tài)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明
這篇文章主要介紹了Vue中的assets和static目錄:使用場(chǎng)景及區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過(guò)點(diǎn)擊空白頁(yè)面來(lái)讓彈窗隱藏,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09淺談vue中$event理解和框架中在包含默認(rèn)值外傳參
這篇文章主要介紹了淺談vue中$event理解和框架中在包含默認(rèn)值外傳參,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法
這篇文章主要介紹了vue-resource請(qǐng)求實(shí)現(xiàn)http登錄攔截或者路由攔截的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享
在本篇文章里小編給大家分享的是一篇關(guān)于vue props 單項(xiàng)數(shù)據(jù)流實(shí)例分享內(nèi)容,需要的朋友們可以參考下。2020-02-02