路由元信息

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 = ''; }

總結

以上是生活随笔為你收集整理的Vue项目实战03 : vue中 meta 路由元信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。