溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Vue頁面手動刷新，實現導航欄激活項還原到初始狀態的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
場景描述：在頁面中存在頂部導航和左側導航，左側導航和右側內容區使用了命名視圖實現，點擊左側導航的鏈接時，右側內容區相應顯示不同組件內容。問題：在當前鏈接手動刷新瀏覽器（例如：瀏覽器地址為/enterprise/list），頂部導航激活項還原到初始狀態（這里默認是“工作臺”項）。
原理：每次刷新都會重新實例化Vue，也就是會調用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">企業管理</el-menu-item>
<el-menu-item index="/orderManager">訂單管理</el-menu-item>
<el-menu-item index="/systemManager">系統管理</el-menu-item>
</el-menu>
</template>
<script>
export default {
name: 'app',
data () {
return {
defaultActiveIndex: "/"
}
},
created() {
// 組件創建完后獲取數據，
// 此時 data 已經被 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; //獲取當前路由
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區分不同模塊菜單
name: 'home',
redirect: '/dashboard',
component: Home,
menuShow: true,
children: [
{
path: '/dashboard',
component: HomeNav,
name: 'dashboard',
leaf: true, // 只有一個節點
iconCls: 'icon-home', // 圖標樣式class
menuShow: true,
children: [
{ path: '/dashboard', component: Dashboard, name: '首頁', menuShow: true }
]
},
{
path: '/mySet',
component: HomeNav,
name: '我的設置',
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, // 只有一個節點
iconCls: 'icon-home', // 圖標樣式class
menuShow: true,
children: [
{ path: '/enterprise/list', component: EnterpriseList, name: '企業列表', menuShow: true }
]
},
{
path: '/enterpriseAdd',
component: EnterpriseNav,
name: 'enterpriseAdd',
leaf: true, // 只有一個節點
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/add', component: EnterpriseAdd, name: '企業添加', menuShow: true }
]
},
{
path: '/enterpriseValidate',
component: EnterpriseNav,
name: 'enterpriseValidate',
leaf: true, // 只有一個節點
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/validate', component: EnterpriseValidate, name: '企業認證', menuShow: true }
]
}
]
}
]補充知識：vue手動刷新視圖以及其他小問題
最近把手頭上一個使用angularJS+jquery各種七七八八組件寫的頁面拿vue+elementUI重寫了一邊, 真是極度絲滑, 記錄一些vue和elementUI的小問題
1.如果vue中的數據結構比較龐大的話, 十分有可能會出現model更新而視圖不更新/model和視圖都不更新也不報錯的情況, 此時需要手動刷新vue的數據, 在change或click事件中, 使用this.$forceUpdate()手動刷新視圖
//像這樣
changeSef: function () {
//手動刷新視圖
var that = this;
that.$forceUpdate();
},2.在vue中使用setTimeout
//錯誤示范
setTimeout(bidOrderInit, 200);
//上面那樣是不行的,網上查了下, 大致是說在setTimeout中this指向window對象,
//于是乎被定時的方法中就使用不到vue的this對象了
//正確示范
//可以無視對ie的支持時
setTimeout(()=> {
this.bidOrderInit();
}, 200);
//需要兼容ie時
setTimeout(function () {
this.bidOrderInit();
}, 200);感謝各位的閱讀！關于Vue頁面手動刷新，實現導航欄激活項還原到初始狀態的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
