一、背景
之前寫前端都是后端返回界面，跳轉(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è)路由信息是否需要檢測，true 表示要檢測，false 表示不需要檢測（這個(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
