vue-router 路由元信息：https://blog.csdn.net/wenyun_kang/article/details/70987840  

终于搞明白了路由元信息是个啥了：https://blog.csdn.net/cofecode/article/details/79181894  

一、背景 之前写前端都是后端返回界面，跳转神马的完全不用自己操心，但是这次用 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 // 别忘了这句啊，之前忘写了，调了好半天呢 } }})--------------------- 作者：粉刷匠 来源：CSDN 原文：https://blog.csdn.net/wenyun_kang/article/details/70987840 版权声明：本文为博主原创文章，转载请附上博文链接！

为什么会有路由元信息这个东西？

我们在做网站登录验证的时候，可以使用到beforeEach 钩子函数进行验证操作，如下面代码 ，如果页面path为’/goodsList’，那么就让它跳转到登录页面，实现了验证登录。

router.beforeEach((to, from, next) => { if (to.path === '/goodsList') { next('/login') } else next()})

如果需要登录验证的网页多了怎么办？

1.这里是对比path。如果需要验证的网页很多，那么在if条件里得写下所有的路由地址，将会是非常麻烦的一件事情。

2.因为路由是可以嵌套的。有’/goodsList’，那么可能会有’/goodsList/online’，再或者还有’/goodsList/offline’、’/goodsList/audit’、’/goodsList/online/edit’等等。

如果像刚才例子中这样对比（to.path === ‘/goodsList’），就非常单一，其他的路径压根不会限制（验证）到，照样能正常登陆！因为每个to.path根本不一样。

我们所理想的就是把’/goodsList’限制了，其他所有的以’/goodsList’开头的那些页面都给限制到！

to Route: 即将要进入的目标 路由对象 我们打印一下to

它有很多属性，有 - fullPath - hash - matched - meta - name - params - path - query

其中有个属性，matched，就是匹配了的路由，我们打印出来，这个是个数组。它的第一项就是{path: “/goodslist”}，一直到最为具体的当前path （例如：{path: “/goodslist/online/edit”}）

这里可以循环matched这个数组，看每一项的path 有没有等于’/goodsList’,只要其中一个有，那么就让它跳转到登录状态

router.beforeEach((to, from, next) => { if (to.matched.some(function (item) { return item.path == '/goodslist' })) { next('/login') } else next()})

那么这里只是对goodsList进行验证判断，且限制的还是path，如果页面中还有会员列表、资讯列表、广告列表都需要进行验证的时候，用path来做限制似乎有点不好用。轮到主角登场了

meta字段（元数据）直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了

{ path: '/actile', name: 'Actile', component: Actile, meta: { login_require: false },},{ path: '/goodslist', name: 'goodslist', component: Goodslist, meta: { login_require: true }, children:[ { path: 'online', component: GoodslistOnline } ]}

这里我们只需要判断item下面的meta对象中的login_require是不是true，就可以做一些限制了

router.beforeEach((to, from, next) => { if (to.matched.some(function (item) { return item.meta.login_require })) { next('/login') } else next()})--------------------- 作者：cofecode 来源：CSDN 原文：https://blog.csdn.net/cofecode/article/details/79181894 版权声明：本文为博主原创文章，转载请附上博文链接！