詳解vue-router 路由元信息
一、背景
之前寫(xiě)前端都是后端返回界面，跳轉(zhuǎn)神馬的完全不用自己操心，但是這次用 vue 寫(xiě)的前端，第一次前后端分離，后端只給前端提供數(shù)據(jù)接口，一開(kāi)始還想著是后端控制界面的渲染神馬的，但是后面一想，路由神馬的都是前端控制的，后端的手伸不過(guò)來(lái)啊，于是乎就一直在逛 vue-router 的官網(wǎng)，想著應(yīng)該會(huì)有相關(guān)的東西，然后發(fā)現(xiàn)了路由元信息，起初怎么也沒(méi)看懂是什么意思，后面慢慢琢磨明白了，記錄一下
二、代碼分析
（1）路由定義
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
meta: { requiresAuth: true }// a meta field
}
]
})
這里的 meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名稱(chēng)，用來(lái)標(biāo)記這個(gè)路由信息是否需要檢測(cè)，true 表示要檢測(cè)，false 表示不需要檢測(cè)（這個(gè)名稱(chēng)隨便起，比如我自己的就起的 requiresId，或者你懶得想，就直接 a ,b 這么起，當(dāng)然，還是比較建議起個(gè)有意義的名稱(chēng)）
（2）js 代碼
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
render: h => h(App),
created () {
this.redrct()
},
methods: {
redrct () {
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresId)) { //這里meta字段的名稱(chēng)要與上面route里面保持一致
// this route requires Id, check if logged in
// if not, redirect to login page.
if (!this.loggedIn()) { // 自己的判斷條件
next({
path: '/', // 重定向后的路由
query: { redirect: to.fullPath } // 登錄成功之后可以根據(jù)query中的內(nèi)容跳轉(zhuǎn)回原來(lái)的路由(頁(yè)面)
})
} else {
next()
}
} else {
next() // 確保一定要調(diào)用 next()
}
})
},
loggedIn () {
var id = sessionStorage.getItem('userId')
if (id === null) { // 未登錄
return false
}
return true // 別忘了這句啊，之前忘寫(xiě)了，調(diào)了好半天呢
}
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue+iview實(shí)現(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了Vue左滑組件slider的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景
這篇文章主要介紹了Vue中的nextTick作用和幾個(gè)簡(jiǎn)單的使用場(chǎng)景，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue插件--仿微信小程序showModel實(shí)現(xiàn)模態(tài)提示窗功能
這篇文章主要介紹了vue插件--仿微信小程序showModel實(shí)現(xiàn)模態(tài)提示窗,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
這篇文章主要給大家介紹了關(guān)于vue圖片懶加載代碼實(shí)現(xiàn)的相關(guān)資料,所謂圖片懶加載是指當(dāng)我們?yōu)g覽頁(yè)面時(shí),只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動(dòng)時(shí)再繼續(xù)加載后面的圖片,需要的朋友可以參考下2023-07-07
vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡
放大鏡在很多地方都可以使用的到，本文主要介紹了vue結(jié)合leaflet實(shí)現(xiàn)地圖放大鏡，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
在實(shí)際開(kāi)發(fā)中,Vue組件之間的數(shù)據(jù)傳遞是最常見(jiàn)的需求,由于組件的作用域相互獨(dú)立,如何在父子、兄弟和跨級(jí)組件間傳遞數(shù)據(jù)就顯得尤為重要,本文將詳細(xì)介紹多種Vue組件間傳遞數(shù)據(jù)的方,需要的朋友可以參考下2025-03-03
Vue實(shí)現(xiàn)開(kāi)心消消樂(lè)游戲算法
這篇文章主要介紹了使用Vue寫(xiě)一個(gè)開(kāi)心消消樂(lè)游戲，游戲算法在文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要給大家介紹了關(guān)于vue中銷(xiāo)毀定時(shí)器的幾種解決方案,銷(xiāo)毀定時(shí)器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時(shí)器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下2023-08-08
Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法
這篇文章主要介紹了Vue-cli項(xiàng)目部署到Nginx服務(wù)器的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11