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-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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
PHP模板引擎SMARTY
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/11/24 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
PHP 实用代码收集
2010/01/22 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
JavaScript 参考教程
2006/12/29 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
为什么需要版本控制?
2013/08/08 面试题
竞职演讲稿范文
2014/01/11 职场文书
大学活动邀请函
2014/01/28 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
银行先进个人总结
2015/02/15 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL