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