这次给大家带来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: '', 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 // 别忘了这句啊，之前忘写了，调了好半天呢 } }})
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Particles.js库在vue里如何使用
Three.js使用详解
以上就是Vue-router的路由元信息使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2771492.html
