資訊專欄INFORMATION COLUMN
摘要：如果存在路由列表，則把之后的路由都刪掉登錄在要使用的組件中使用或者均可。需要注意的是，此時訪問不到。而這個鉤子就會在這個情況下被調(diào)用。可以訪問組件實例導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用可以訪問組件實例參考資料
Main.js
var routeList = [];
router.beforeEach((to, from, next) => {
var index = -1;
for(var i = 0; i < routeList.length; i++) {
if(routeList[i].name == to.name) {
index = i;
break;
}
}
if (index !== -1) {
//如果存在路由列表，則把之后的路由都刪掉
routeList.splice(index + 1, routeList.length - index - 1);
} else if(to.name != "登錄"){
routeList.push({"name":to.name,"path":to.fullPath});
}
to.meta.routeList = routeList;
next()
});
2、在要使用的組件中
{{item.name}}
使用 watch 或者 beforeRouteEnter 均可。
需要注意的是，beforeRouteEnter 此時訪問不到this。
官網(wǎng)描述 https://router.vuejs.org/zh-c...
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
// 不！能！獲取組件實例 `this`
// 因為當(dāng)守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
// 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
// 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
// 由于會渲染同樣的 Foo 組件，因此組件實例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。
// 可以訪問組件實例 `this`
},
beforeRouteLeave (to, from, next) {
// 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用
// 可以訪問組件實例 `this`
}
}
參考資料:
https://router.vuejs.org/zh-c...
https://segmentfault.com/q/10...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107541.html
摘要：在實際開發(fā)過程中發(fā)現(xiàn)，考試系統(tǒng)各個表集合都是需要關(guān)聯(lián)，這種非關(guān)系型數(shù)據(jù)庫，做起來反而麻煩了不少。數(shù)據(jù)中既有試卷的信息，也有很多題目。題目都屬于該試卷，改試卷又屬于當(dāng)前登錄系統(tǒng)的老師即創(chuàng)建試卷的老師。 這是我畢業(yè)項目，從0到1，前后臺獨立開發(fā)完成。功能不多，在此記錄,溫故而知新！項目github地址:https://github.com/FinGet/Exam ，博客地址：https:/...
摘要：主題版本更新重做文章主列表新增菜單圖標(biāo)支持面包屑彩色標(biāo)簽縮略圖圓角支持中文和英文，支持百度收錄，適用于各種圖片展示網(wǎng)站新聞?wù)倦娪罢久缊D站資源站等等，扁平化設(shè)計公眾號展示打賞功能列表無限加載全屏相冊展示。TOB主題2.7版本更新：重做文章主列表、新增菜單圖標(biāo)支持、面包屑、彩色標(biāo)簽、縮略圖圓角！支持中文和英文，支持百度收錄，適用于各種圖片展示網(wǎng)站、新聞?wù)?、電影站、美圖站、資源站等等，扁平化設(shè)計、...
效果展示： 一、子組件 <template> <divclass="myDiv"> <!--這里的listAll用于接收父組件傳遞進來的菜單列表--> <templatev-for="(item,i)inlistAll"> <!--有child就顯示child的下拉型菜單，有小箭頭...
摘要：但是有邊框，不好看啊再次美化使用使用圖標(biāo)庫安裝這里主要貼一下的改動，其他的代碼就不貼了看下效果圖標(biāo)什么的都有了。另外文件需要加上看看效果點擊菜單，路徑跳轉(zhuǎn)，并且每次都是單獨去加載路由的文件。 做完這個demo后，我體會到，Vue組件化，webpack, Vue-router等，并不是很難學(xué)習(xí)，你需要的只是拿起斧頭的勇氣在做demo的過程中，我遇到一個問題，就是vue-router懶加載...
摘要：目標(biāo)中間一段空白把導(dǎo)航欄分為左右兩個部分在導(dǎo)航欄上加上一個搜索框，但不被的樣式污染。 前置 本文需要對CSS，Vue，ElementUI有基本的了解。 本文以ElementUI提供的導(dǎo)航菜單組件為基礎(chǔ)。 本文希望能在此組件基礎(chǔ)上實現(xiàn)以下內(nèi)容： 中間一段空白把導(dǎo)航欄分為左右兩個部分 在導(dǎo)航欄上加上一個搜索框，但不被 el-menu-item 的樣式污染。 先研究清楚ElementUI...
閱讀 2864·2021-11-22 11:56
閱讀 3564·2021-11-15 11:39
閱讀 909·2021-09-24 09:48
閱讀 768·2021-08-17 10:14
閱讀 1335·2019-08-30 15:55
閱讀 2763·2019-08-30 15:55
閱讀 1320·2019-08-30 15:44
閱讀 2789·2019-08-30 10:59
