Vue-router的路由元資訊使用詳解

這次帶給大家Vue-router的路由元資訊使用詳解，Vue-router路由元資訊使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

一、背景

# 之前寫前端都是後端回傳介面，跳轉神馬的完全不用自己操心，但這次用 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 // 别忘了这句啊，之前忘写了，调了好半天呢
  }
 }
})

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Particles.js庫在vue裡如何使用

##Three.js使用詳解

以上是Vue-router的路由元資訊使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！