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 的 v-model用法实例
Nov 23 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue实现简易音乐播放器
Aug 14 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学习笔记 数组遍历实现代码
2011/06/09 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
JavaScript模块详解
2017/12/18 Javascript
express.js中间件说明详解
2019/03/19 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Django csrf 验证问题的实现
2018/10/09 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python带参数打包exe及调用方式
2019/12/21 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
北京大学自荐信范文
2014/01/28 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
交通事故协议书范本
2016/03/19 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript