路由元信息轰驳？（黑人問號臉？弟灼？级解？）是不是這么官方的解釋很多人都會一臉懵？那么我們說meta田绑，是不是很多人恍然大悟勤哗，因為在項目中用到或者看到過呢？
是的掩驱，路由元信息就是我們定義路由時配置的meta字段芒划；那么這個meta的作用是什么呢？
首先看一個場景：
通常我們在開發(fā)網(wǎng)站或者移動應(yīng)用的時候欧穴，我們通常會有網(wǎng)頁權(quán)限驗證的需求（別說你沒有民逼，你肯定有），這種需求一般是指需要登錄后才可進入涮帘，也就是需要用戶登錄獲取用戶Token或者用戶信息之后才可進入拼苍；當這個需求下來的時候，我們作為前端開發(fā)人員的第一反應(yīng)是路由守衛(wèi)啊调缨，一個路由前置守衛(wèi)通過判斷to.path就可以解決疮鲫；
用to.path來判斷做權(quán)限驗證會有兩個問題：
1：首先，如果需要做權(quán)限驗證的頁面很多呢弦叶？難道我們要通過if(to.path==='/' || to.path === '/home')這種方式來一個個的添加路徑判斷嗎俊犯？
2：然后，routes管理器中會有很多json對象湾蔓，這種json對象我們通常把它叫做路由記錄瘫析，路由記錄是可以嵌套的，允許存在父子關(guān)系默责；我們用if來判斷的時候贬循，會有匹配不完全的問題，例如你匹配了/home桃序，那么/home/list呢杖虾，這個將不會被匹配到；
我們的理想狀態(tài)下是假如我要限制了/home媒熊，那么不管你路徑是/home/index也好還是/home/home也好奇适，只要是home下來的子路由記錄統(tǒng)統(tǒng)都需要登錄后才能訪問坟比；
這個時候我們就可以考慮用路由元信息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嚷往；
然后我們的路由前置全局守衛(wèi)可以這么寫：
router.beforeEach((to, from, next) => {
//定義token來模擬
let token =“123456”
//判斷即將進入的路由是否需要驗證
if(to.meta.login){
//如果即將進入的路由需要驗證
//并且token不存在的話葛账，那么就跳轉(zhuǎn)page2(登錄頁)
if(!token){
next("/page2");
//如果需求驗證token存在直接放行
}else{
next();
}
//如果不需要驗證也是直接放行
}else{
next();
}
})
最后效果圖如下：
當然這只是路由元信息的功能其一，路由元信息其實有很多用途皮仁，類似于一個當前路由的全局變量籍琳，可以通過meta來進行判斷操作；
keep-alive組件：
場景：在一個列表項很長的時候我們通常需要進行分頁操作贷祈，移動端的分頁操作基本上是上拉加載和下拉刷新趋急；假如我們已經(jīng)進入了這個列表的第四頁，那么當我們想進去詳情頁查看詳情的時候势誊，當我們返回的時候這個時候頁碼會直接變?yōu)?呜达，因為數(shù)據(jù)已經(jīng)初始化狀態(tài)；這個問題我們通常需要keep-alive組件來解決粟耻；
keep-alive是Vue內(nèi)置的一個組件查近，通常是用來保留數(shù)據(jù)狀態(tài)或避免重復(fù)渲染，也就是我們說的緩存效果勋颖；
使用：
<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>可以保留它的狀態(tài)或避免重新渲染
<keep-alive exclude="a">
<component>
<!-- 除了 name 為 a 的組件都將被緩存！ -->
</component>
</keep-alive>可以保留它的狀態(tài)或避免重新渲染
當然我們也可以根據(jù)組件來動態(tài)緩存次哈，我們知道vue-router是Vue官方給我們提供的一個路由組件：
<keep-alive>
<router-view>
<!-- 所有路徑匹配到的視圖組件都會被緩存胎署！ -->
</router-view>
</keep-alive>
如果像上述代碼這樣，我們的所有路由視圖都將被緩存窑滞，我們這個時候就可以借助我們的路由元信息meta琼牧，那么我們來修改一下代碼實現(xiàn)動態(tài)緩存：
思路：
meta路由元信息對象里面放著的是類似于局部變量，在路由匹配的組件內(nèi)部都能夠訪問得到哀卫，我們可以通過meta來定義一個自定義字段來判斷標識頁面是否需要開啟緩存：
// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被緩存
}
}, {
path: '/:id',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被緩存
}
}
]
//通過v-if來動態(tài)的判斷展示
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 這里是會被緩存的視圖組件巨坊，比如 Home！ -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 這里是不被緩存的視圖組件此改，比如 Edit趾撵！ -->
</router-view>
