詳解vue-router 路由元信息
一、背景
之前寫前端都是后端返回界面，跳轉(zhuǎn)神馬的完全不用自己操心，但是這次用 vue 寫的前端，第一次前后端分離，后端只給前端提供數(shù)據(jù)接口，一開始還想著是后端控制界面的渲染神馬的，但是后面一想，路由神馬的都是前端控制的，后端的手伸不過來啊，于是乎就一直在逛 vue-router 的官網(wǎng)，想著應(yīng)該會(huì)有相關(guān)的東西，然后發(fā)現(xiàn)了路由元信息，起初怎么也沒看懂是什么意思，后面慢慢琢磨明白了，記錄一下
二、代碼分析
（1）路由定義
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
meta: { requiresAuth: true }// a meta field
}
]
})
這里的 meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名稱，用來標(biāo)記這個(gè)路由信息是否需要檢測(cè)，true 表示要檢測(cè)，false 表示不需要檢測(cè)（這個(gè)名稱隨便起，比如我自己的就起的 requiresId，或者你懶得想，就直接 a ,b 這么起，當(dāng)然，還是比較建議起個(gè)有意義的名稱）
（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)了好半天呢
}
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)抖音時(shí)間轉(zhuǎn)盤，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue-Router進(jìn)階之滾動(dòng)行為詳解
本篇文章主要介紹了Vue-Router進(jìn)階之滾動(dòng)行為詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件
這篇文章主要介紹了vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
vue頁面切換到滾動(dòng)頁面顯示頂部的實(shí)例
下面小編就為大家分享一篇vue頁面切換到滾動(dòng)頁面顯示頂部的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過程
基礎(chǔ)組件開發(fā)是項(xiàng)目業(yè)務(wù)開發(fā)的基石, 本文主要介紹了通過vue3的vite腳手架快速搭建項(xiàng)目, 開發(fā)條形碼和二維碼組件的過程,感興趣的朋友跟隨小編一起看看吧2023-08-08
漏斗圖常用于可視化業(yè)務(wù)流程中的各個(gè)階段的轉(zhuǎn)換率,例如銷售漏斗或營(yíng)銷漏斗,它可以幫助用戶識(shí)別流程中的瓶頸和改進(jìn)機(jī)會(huì),本文給大家介紹了如何使用Vue3和Plotly.js繪制交互式漏斗圖,,文中有相關(guān)代碼示例供大家參考,需要的朋友可以參考下2024-07-07
Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式
這篇文章主要介紹了Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題
這篇文章主要介紹了vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vite處理html模板插件之vite-plugin-html插件使用
這篇文章主要給大家介紹了關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的相關(guān)資料,Vite是一個(gè)現(xiàn)代化的前端構(gòu)建工具,而vite-plugin-html是Vite的一個(gè)插件,用于在構(gòu)建時(shí)自動(dòng)生成HTML文件,需要的朋友可以參考下2023-10-10