Enrutamiento de metainformación
meta :
La información de identificación de cada ruta es información única de la ruta. Independientemente de si el meta está definido en la ruta, se puede acceder a él en el componente a través de este. $ Route.meta. Si no está definido, regresa {}
En el componente:
this. $ route.meta obtiene la metainformación de enrutamiento del componente, si no está definido, devuelve {}
En ruta:
Use router.beforeEach ((to, from, next) => { console.log (to.meta) }) para darle a cada elemento de configuración de ruta un meta atributo más meta: { }
Uso de metainformación de enrutamiento
De acuerdo con la información única de cada ruta
1. Verificar si el usuario está conectado
2. Establecer el título
3. Si mostrar un determinado componente
4. Si el componente está en caché ...
Verifique que el usuario haya iniciado sesión, establezca el título, por ejemplo:
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;
Caché de componentes
<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的
}
Si el componente almacenado en caché desea borrar los datos o ejecutar el método de inicialización, llame a la función de enlace activada al cargar el componente, de la siguiente manera:
activated: function () {
this.data = '';
}