vue-router定义元信息meta操作


Posted in Vue.js onDecember 07, 2020

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue'
import NotFound from '../views/NotFound.vue'
import TestChild from '../views/TestChild.vue'
import AView from '../views/AView.vue'
import BView from '../views/BView.vue'
 
Vue.use(VueRouter)
 
const routes = [
 {
 path: '/',
 alias:'/home',
 components:{
  default: Home,
  aView: AView,
  bView: BView,
 },
 },
 {
 path: '/test/:id',
 name: 'Test',
 component: Test,
 props:true,
 children:[
  {
  path: ':name',
  name: 'TestChild',
  component: TestChild,
  props:true,
  /*
  定义路由的时候可以配置 meta 字段,用于一些校验,比如在导航守卫中进行校验,定义的值可以在$route中访问到
  */
  meta:{
  isRequiresAuth:true,
  isChecked:false,
  }
 }]
 },
 {
 path: '*',
 name: 'NotFound',
 component: NotFound
 },
]
 
const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
})
 
export default router

views/TestChild.vue

<template>
 <div>
  我是TestChild,查看动态路由参数name:{{name}}
 </div>
</template>
 
<script>
 export default {
  props:["name"],
  created () {
   //打印meta中定义的isRequiresAuth
   console.log(this.$route.meta.isRequiresAuth);
  },
 }
</script>
 
<style lang="scss" scoped>
 
</style>

效果截图:

vue-router定义元信息meta操作

补充知识:vue-router路由元信息及keep-alive组件级缓存

路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说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来进行处理;

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

vue-router定义元信息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();
 }
})

最后效果图如下:

vue-router定义元信息meta操作

当然这只是路由元信息的功能其一,路由元信息其实有很多用途,类似于一个当前路由的全局变量,可以通过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定义元信息meta操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
Vue如何实现验证码输入交互
Dec 07 #Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 #Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
一个MYSQL操作类
2006/11/16 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Javascript的this用法
2017/01/16 Javascript
Ajax基础知识详解
2017/02/17 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python之yield和Generator深入解析
2019/09/18 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Numpy之reshape()使用详解
2019/12/26 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
安全标准化实施方案
2014/02/20 职场文书
写字楼租赁意向书
2014/07/30 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
办公用品质量保证书
2015/05/11 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
经营场所使用证明
2015/06/19 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
mysql部分操作
2021/04/05 MySQL
python中print格式化输出的问题
2021/04/16 Python
在pycharm中无法import所安装的库解决方案
2021/05/31 Python