详解vue-router 路由元信息

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解vue-router 路由元信息，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1610字，纯文字阅读大概需要3分钟。

内容图文

一、背景

之前写前端都是后端返回界面，跳转神马的完全不用自己操心，但是这次用 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 // 别忘了这句啊，之前忘写了，调了好半天呢
  }
 }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的详解vue-router 路由元信息全部内容，希望文章能够帮你解决详解vue-router 路由元信息所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---