路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢?

  是的,路由元信息就是我们定义路由时配置的meta字段;那么这个meta的作用是什么呢?

  首先看一个场景:

    通常我们在开发网站或者移动应用的时候,我们通常会有网页权限验证的需求(别说你没有,你肯定有),这种需求一般是指需要登录后才可进入,也就是需要用户登录获取用户Token或者用户信息之后才可进入;当这个需求下来的时候,我们作为前端开发人员的第一反应是路由守卫啊,一个路由前置守卫通过判断to.path就可以解决;

    用to.path来判断做权限验证会有两个问题:    

    1:首先,如果需要做权限验证的页面很多呢?难道我们要通过if(to.path==='/' || to.path === '/home')这种方式来一个个的添加路径判断吗?

    2:然后,routes管理器中会有很多json对象,这种json对象我们通常把它叫做路由记录,路由记录是可以嵌套的,允许存在父子关系;我们用if来判断的时候,会有匹配不完全的问题,例如你匹配了/home,那么/home/list呢,这个将不会被匹配到;

    我们的理想状态下是假如我要限制了/home,那么不管你路径是/home/index也好还是/home/home也好,只要是home下来的子路由记录统统都需要登录后才能访问;

    这个时候我们就可以考虑用路由元信息meta来进行处理;

    首先简单的看一下页面效果:

  

  我们的路由管理器中的路由记录配置如下:

const routes=[
{
path:'/page1',
component:page1,
meta:{
login:true
},
children: [
{
path: "phone",
component: phone
},
{
path: "computer",
component: computer
},
]
}, {
path:"/page2",
component:page2,
meta:{
login:false
}
},
]

  我们上面在meta中自定义login字段是标识当前路由是否需要验证token;

  然后我们的路由前置全局守卫可以这么写:

  

router.beforeEach((to, from, next) => {
//定义token来模拟
let token =“123456”
//判断即将进入的路由是否需要验证
if(to.meta.login){
//如果即将进入的路由需要验证
//并且token不存在的话,那么就跳转page2(登录页)
if(!token){
next("/page2");
//如果需求验证token存在直接放行
}else{
next();
}
//如果不需要验证也是直接放行
}else{
next();
}
})

  最后效果图如下:

    

  当然这只是路由元信息的功能其一,路由元信息其实有很多用途,类似于一个当前路由的全局变量,可以通过meta来进行判断操作;

  keep-alive组件:

    场景:在一个列表项很长的时候我们通常需要进行分页操作,移动端的分页操作基本上是上拉加载和下拉刷新;假如我们已经进入了这个列表的第四页,那么当我们想进去详情页查看详情的时候,当我们返回的时候这个时候页码会直接变为1,因为数据已经初始化状态;这个问题我们通常需要keep-alive组件来解决;

     keep-alive是Vue内置的一个组件,通常是用来保留数据状态或避免重复渲染,也就是我们说的缓存效果;

   使用:

<keep-alive>
<component>
<!-- 该组件将被缓存! -->
</component>
</keep-alive>

     keep-alive给我们提供了两个属性,分别是include和exclude:

    include:接受值为字符串或者正则表达式,只有匹配的才被缓存;

    exclude:接受值为字符串或者正则表达式,被匹配的路由将不会被缓存;

// 组件 a
export default {
name: 'a',
data () {
return {}
}
}
<keep-alive include="a">
<component>
<!-- name 为 a 的组件将被缓存! -->
</component>
</keep-alive>可以保留它的状态或避免重新渲染
<keep-alive exclude="a">
<component>
<!-- 除了 name 为 a 的组件都将被缓存! -->
</component>
</keep-alive>可以保留它的状态或避免重新渲染

当然我们也可以根据组件来动态缓存,我们知道vue-router是Vue官方给我们提供的一个路由组件:

<keep-alive>
<router-view>
<!-- 所有路径匹配到的视图组件都会被缓存! -->
</router-view>
</keep-alive>

  如果像上述代码这样,我们的所有路由视图都将被缓存,我们这个时候就可以借助我们的路由元信息meta,那么我们来修改一下代码实现动态缓存:

  思路:

    meta路由元信息对象里面放着的是类似于局部变量,在路由匹配的组件内部都能够访问得到,我们可以通过meta来定义一个自定义字段来判断标识页面是否需要开启缓存:

    

// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
 //通过v-if来动态的判断展示
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 Home! -->
</router-view>
</keep-alive> <router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>

vue-router路由元信息及keep-alive组件级缓存的更多相关文章

  1. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  2. router.beforeEach、路由元信息、导航守卫与函数式编程

    一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...

  3. VueJs(12)---vue-router(导航守卫,路由元信息)

    vue-router(导航守卫,路由元信息) 之前泄露两篇有关vue-router博客: VueJs(10)---vue-router(进阶1) VueJs(11)---vue-router(进阶2) ...

  4. vue-router 路由元信息 终于搞明白了路由元信息是个啥了

    vue-router 路由元信息:https://blog.csdn.net/wenyun_kang/article/details/70987840 终于搞明白了路由元信息是个啥了:https:// ...

  5. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  6. vue-router路由元信息详解

    一.官方文档 路由元信息:定义路由的时候可以配置 meta 字段 const router = new VueRouter({ routes: [ { path: '/foo', component: ...

  7. vue-router之路由元信息

    路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢? 是的,路由元信息就是我们定义路由时配置的meta字段:那 ...

  8. vue 路由元信息

    官方文档:路由meta元信息 前言: 在设置面包屑导航还有菜单栏的时候,路由的meta字段可以自定义我们需要的信息,然后路由跳转的时候,提供我们判断条件 文档: 定义路由的时候可以配置 meta 字段 ...

  9. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

随机推荐

  1. python 20 规范化目录

    目录 规范化目录 1. 划归固定的路径: 2. 划分文件 2.1 seetings 配置文件 2.2 common 公共组件文件 2.3 src 主文件 2.4 starts 项目启动文件 2.5 类 ...

  2. CentOS -- RocketMQ HA & Monitoring

    RocketMQ Architecture NameServer Cluster Name Servers provide lightweight service discovery and rout ...

  3. 安卓开发开发规范手册V1.0

    安卓开发开发规范手册V1.0 之前发布过一份Web安全开发规范手册V1.0,看到收藏文章的读者挺多,发现整理这些文档还挺有意义. 最近周末抽了些时间把之前收集关于安卓安全开发的资料也整理了一下,整理出 ...

  4. MySql优化相关概念的理解笔记

    MySQL架构 查询执行流程 查询执行的流程是怎样的: 连接1.1客户端发起一条Query请求,监听客户端的‘连接管理模块’接收请求1.2将请求转发到‘连接进/线程模块’1.3调用‘用户模块’来进行授 ...

  5. node.js常用的全局成员和对象

    一般可以直接调用的对象,我们称之为全局对象: 一下对象都加了console.log(),以在运行环境中的显示效果为标准 //包含文件名称的全路径:    console.log(_filename); ...

  6. 图解Nginx限流配置

    本文以示例的形式,由浅入深讲解Nginx限流相关配置,是对简略的官方文档的积极补充. Nginx限流使用的是leaky bucket算法,如对算法感兴趣,可移步维基百科先行阅读.不过不了解此算法,不影 ...

  7. Python和Sublime安装教程

    Python安装 安装python可以去https://www.python.org官网下载 点开官网后点击下图我圈出来的地方 然后翻到页面最后,选择要安装的版本 点击下载后打开,将 Add  Pyt ...

  8. ~!#$%^&*这些符号怎么读? 当然是用英语(键盘特殊符号小结)

    ~!#$%^&*这些符号怎么读? 当然是用英语(键盘特殊符号小结)   感谢原文作者:http://www.360doc.com/content/14/0105/20/85007_342874 ...

  9. spark与mapreduce的区别

    spark是通过借鉴Hadoop mapreduce发展而来,继承了其分布式并行计算的优点,并改进了mapreduce明显的缺陷,具体表现在以下几方面: 1.spark把中间计算结果存放在内存中,减少 ...

  10. 使用FreePBX和第三方线路对接

    首先搭建好相关环境 在FreePBX的web-gui控制界面进行操作. 通信接口连接--->中继  先创建一条中继线路: 创建中继 设置这条线路 优先级为0 中继名: 设置一个名字 Outgoi ...