詳解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)了好半天呢 } } })
以上就是本文的全部內(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-09Vue-Router進(jìn)階之滾動(dòng)行為詳解
本篇文章主要介紹了Vue-Router進(jìn)階之滾動(dòng)行為詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件
這篇文章主要介紹了vue2.0數(shù)據(jù)雙向綁定與表單bootstrap+vue組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02vue頁面切換到滾動(dòng)頁面顯示頂部的實(shí)例
下面小編就為大家分享一篇vue頁面切換到滾動(dòng)頁面顯示頂部的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過程
基礎(chǔ)組件開發(fā)是項(xiàng)目業(yè)務(wù)開發(fā)的基石, 本文主要介紹了通過vue3的vite腳手架快速搭建項(xiàng)目, 開發(fā)條形碼和二維碼組件的過程,感興趣的朋友跟隨小編一起看看吧2023-08-08Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式
這篇文章主要介紹了Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題
這篇文章主要介紹了vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vite處理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