vue中meta路由元信息

2024-03-14 04:14| 来源: 网络整理| 查看: 265

路由元信息：

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;

组件缓存：

{ path: '', name: '', component: , meta: {keepAlive: true} // 这个是需要keepalive的 }, { path: '', name: '', component: , meta: {keepAlive: false} // 这是不会被keepalive的 }

如果缓存的组件想要清空数据或者执行初始化方法，在加载组件的时候调用activated钩子函数，如下：

activated: function () { this.data = ''; }

【本文地址】

公司简介

联系我们