vue-router定义元信息meta操作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: v.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.$a.isRequiresAuth);
},
react router缓存}
</script>
<style lang="scss" scoped>
</style>
效果截图:
补充知识: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来进⾏处理;
⾸先简单的看⼀下页⾯效果:
我们的路由管理器中的路由记录配置如下:
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”
//判断即将进⼊的路由是否需要验证
a.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="$a.keepAlive">
<!-- 这⾥是会被缓存的视图组件,⽐如 Home! -->
</router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive">
<!-- 这⾥是不被缓存的视图组件,⽐如 Edit! -->
</router-view>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。