一、背景

之前寫前端都是后端返回界面，跳轉神馬的完全不用自己操心，但是這次用 vue 寫的前端，第一次前后端分離，后端只給前端提供數據接口，一開始還想著是后端控制界面的渲染神馬的，但是后面一想，路由神馬的都是前端控制的，后端的手伸不過來啊，于是乎就一直在逛 vue-router 的官網，想著應該會有相關的東西，然后發現了路由元信息，起初怎么也沒看懂是什么意思，后面慢慢琢磨明白了，記錄一下

二、代碼分析

官網路由元信息

（1）路由定義

const router = new VueRouter({ routes: [  {   path: '/foo',   component: Foo,   meta: { requiresAuth: true }// a meta field  } ]})

 這里的 meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名稱，用來標記這個路由信息是否需要檢測，true 表示要檢測，false 表示不需要檢測（這個名稱隨便起，比如我自己的就起的 requiresId，或者你懶得想，就直接 a ,b 這么起，當然，還是比較建議起個有意義的名稱）

（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 } // 登錄成功之后可以根據query中的內容跳轉回原來的路由(頁面)      })     } else {      next()     }    } else {     next() // 確保一定要調用 next()    }   })  },  loggedIn () {   var id = sessionStorage.getItem('userId')   if (id === null) { // 未登錄    return false   }   return true // 別忘了這句啊，之前忘寫了，調了好半天呢  } }})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。