vue-router 路由元信息 终于搞明白了路由元信息是个啥了
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: '<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 // 别忘了这句啊,之前忘写了,调了好半天呢
}
}
})
---------------------
作者:粉刷匠
来源: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
版权声明:本文为博主原创文章,转载请附上博文链接!
vue-router 路由元信息 终于搞明白了路由元信息是个啥了的更多相关文章
- 终于搞明白Unicode,ASCII,UTF8,UCS2编码是啥了
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 前言 本文起因于 ...
- 深入 Python 解释器源码,我终于搞明白了字符串驻留的原理!
英文:https://arpitbhayani.me/blogs/string-interning 作者:arpit 译者:豌豆花下猫("Python猫"公众号作者) 声明:本翻译 ...
- 上次阿里面试问到Redis主从复制原理,这次终于搞明白了!
1.前言 Redis单节点存在单点故障,为解决单点问题,需要对Redis节点配置从节点.使用哨兵来监听主节点存活状态,若主节点挂掉,从节点能继续提供缓存功能.从节点怎样和主节点间完成数据传递?就是Re ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 下)
大家好,在上一篇系列文章里,我们一起学习了路由的基本配置,如何创建路由和传参,本篇文章我们一起学习下 Navigation 导航和路由守卫的相关内容. Navigation 如果要改变当前路径,我们可 ...
随机推荐
- Java JNA (四)—— void**、void*、char**、char*、int*等类型映射关系及简单示例
ByReference类有很多子类,这些类都非常有用. ByteByReference.DoubleByReference.FloatByReference. IntByReference.LongB ...
- Solr的学习使用之(五)添加索引数据
1.创建SolrServer类 SolrServer类:提供与Solr实例的连接与通信. 往Solr里添加索引数据,据说有好几种办法,这边利用SolrJ操作solr API完成index操作,具体So ...
- 类目(category) - 类扩展(extension) 区别
说明: 方法,属性或变量: 类别只能添加方法,不能添加属性(理论上,但可以通过runtime的关联添加). 扩展可以添加方法和实例变量或属性,实例变量默认@private类型.扩展是类别的一个特例 ...
- tensor与数组转化
import tensorflow as tfimg1 = tf.constant(value=[[[[1],[2],[3],[4]],[[1],[2],[3],[4]],[[1],[2],[3],[ ...
- 查看Linux系统所对应的版本
#cat /etc/issue 在CentOS下执行显示为:CentOS release 5.7 (Final)Kernel \r on an \m 或在Ubuntu下显示为:Ubuntu 11.04 ...
- mona!mona!mona!
$ PS: $ 关于\(mona\) 是只很棒的猫啦!想知道的可以自己去看\(persona5\)的游戏流程或者动画版啦. \(PPS:\) 补充一下设定啊,\(mona\)是摩尔加纳(原名)的代号啦 ...
- python TypeError: must be str, not bytes错误
TypeError: must be str, not bytes错误: 解答: 写文件处 f=open(filename, 'w')应该写为 open(filename, 'wb') 读文件时 f= ...
- Linux下安装Python,以及环境变量的配置
1.安装环境 centos7 + vmware + xshell 2.安装Python3 2.1下载Python资源包 网址:https://www.python.org/downloads/re ...
- Windows10下安装Jupyter
打开cmd 升级pip3的版本: pip3 install --upgrade pip 安装Jupyter pip3 install jupyter
- poj 3468 : A Simple Problem with Integers 【线段树 区间修改】
题目链接 题目是对一个数组,支持两种操作 操作C:对下标从a到b的每个元素,值增加c: 操作Q:对求下标从a到b的元素值之和. #include<cstdio> #include<c ...