路由元信息
meta：
每个路由的标识信息，是路由独有的一个信息，无论在路由中是否定义meta，在组件中都可以通过this.$route.meta访问到，如果没有定义，返回{}
在组件中：
this.$route.meta获取该组件的路由元信息，如果未定义，则返回{}
在路由中:
通过router.beforeEach((to,from,next)=>{
console.log(to.meta)
})
给每个路由的配置项多一个meta属性
meta:{
}
路由元信息用途
根据每个路由特有的信息
1.验证用户是否登录
2.设置标题
3.是否显示某个组件
4.组件是否缓存……
验证用户是否登录，设置标题，举例：
import Vue from 'vue'
import Router from 'vue-router'
import Header from "../components/header"
import Detail from "../components/goodsDetails"
import Login from "../components/login"
import goodsList from "../components/goodsList"
Vue.use(Router)
let router = new Router({
routes: [{
path: '/',
redirect: Header
}, {
path: '/details/:name/:price/:id',
name: 'details',
component: Detail,
meta: {
isLogin: true,
title: "详情页"
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
isLogin: false,
title: "登录页"
}
}, {
path: '/goodsList',
name: "goodsList",
component: goodsList,
meta: {
isLogin: false,
title: "列表页"
}
}
]
})
//判断是否登录
router.beforeEach((to, from, next) => {
// console.log(to);
//设置标题
document.title = to.meta.title;
//判断是否登录
let token = true;
if (to.meta.isLogin) {
if (token) {
next();
} else {
next("/login")
}
}
next();
})
export default router;
组件缓存
<keep-alive>
<router-view></router-view>
</keep-alive>
<!-- 这里是需要keepalive的 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
{
path: '',
name: '',
component: ,
meta: {
keepAlive: true} // 这个是需要keepalive的
},
{
path: '',
name: '',
component: ,
meta: {
keepAlive: false} // 这是不会被keepalive的
}
如果缓存的组件想要清空数据或者执行初始化方法，在加载组件的时候调用activated钩子函数，如下：
activated: function () {
this.data = '';
}