router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Test from '../views/Test.vue'
import NotFound from '../views/NotFound.vue'
import TestChild from '../views/TestChild.vue'
import AView from '../views/AView.vue'
import BView from '../views/BView.vue'
 
Vue.use(VueRouter)
 
const routes = [
 {
 path: '/',alias:'/home',components:{
  default: Home,aView: AView,bView: BView,},{
 path: '/test/:id',name: 'Test',component: Test,props:true,children:[
  {
  path: ':name',name: 'TestChild',component: TestChild,/*
  定義路由的時候可以配置 meta 欄位，用於一些校驗，比如在導航守衛中進行校驗，定義的值可以在$route中訪問到
  */
  meta:{
  isRequiresAuth:true,isChecked:false,}
 }]
 },{
 path: '*',name: 'NotFound',component: NotFound
 },]
 
const router = new VueRouter({
 mode: 'history',base: process.env.BASE_URL,routes
})
 
export default router

views/TestChild.vue

<template>
 <div>
  我是TestChild,檢視動態路由引數name:{{name}}
 </div>
</template>
 
<script>
 export default {
  props:["name"],created () {
   //列印meta中定義的isRequiresAuth
   console.log(this.$route.meta.isRequiresAuth);
  },}
</script>
 
<style lang="scss" scoped>
 
</style>

效果截圖：

補充知識：vue-router路由元資訊及keep-alive元件級快取

路由元資訊？（黑人問號臉？？？）是不是這麼官方的解釋很多人都會一臉懵？那麼我們說meta，是不是很多人恍然大悟，因為在專案中用到或者看到過呢？

是的，路由元資訊就是我們定義路由時配置的meta欄位；那麼這個meta的作用是什麼呢？

首先看一個場景：

通常我們在開發網站或者移動應用的時候，我們通常會有網頁許可權驗證的需求（別說你沒有，你肯定有），這種需求一般是指需要登入後才可進入，也就是需要使用者登入獲取使用者Token或者使用者資訊之後才可進入；當這個需求下來的時候，我們作為前端開發人員的第一反應是路由守衛啊，一個路由前置守衛通過判斷to.path就可以解決；

用to.path來判斷做許可權驗證會有兩個問題：　　　　

1：首先，如果需要做許可權驗證的頁面很多呢？難道我們要通過if(to.path==='/' || to.path === '/home')這種方式來一個個的新增路徑判斷嗎？

2：然後，routes管理器中會有很多json物件，這種json物件我們通常把它叫做路由記錄，路由記錄是可以巢狀的，允許存在父子關係；我們用if來判斷的時候，會有匹配不完全的問題，例如你匹配了/home，那麼/home/list呢，這個將不會被匹配到；

我們的理想狀態下是假如我要限制了/home，那麼不管你路徑是/home/index也好還是/home/home也好，只要是home下來的子路由記錄統統都需要登入後才能訪問；

這個時候我們就可以考慮用路由元資訊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；

然後我們的路由前置全域性守衛可以這麼寫：

router.beforeEach((to,from,next) => {
 //定義token來模擬
 let token =“123456”
 //判斷即將進入的路由是否需要驗證
 if(to.meta.login){
  //如果即將進入的路由需要驗證
 //並且token不存在的話，那麼就跳轉page2(登入頁)
  if(!token){
   next("/page2");
  //如果需求驗證token存在直接放行
  }else{
   next();
  }
 //如果不需要驗證也是直接放行
 }else{
 next();
 }
})

最後效果圖如下：

當然這只是路由元資訊的功能其一，路由元資訊其實有很多用途，類似於一個當前路由的全域性變數，可以通過meta來進行判斷操作；

keep-alive元件：

場景：

在一個列表項很長的時候我們通常需要進行分頁操作，移動端的分頁操作基本上是上拉載入和下拉重新整理；假如我們已經進入了這個列表的第四頁，那麼當我們想進去詳情頁檢視詳情的時候，當我們返回的時候這個時候頁碼會直接變為1，因為資料已經初始化狀態；這個問題我們通常需要keep-alive元件來解決；

keep-alive是Vue內建的一個元件，通常是用來保留資料狀態或避免重複渲染，也就是我們說的快取效果；

使用：

<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>可以保留它的狀態或避免重新渲染

<keep-alive exclude="a">
 <component>
 <!-- 除了 name 為 a 的元件都將被快取！ -->
 </component>
</keep-alive>可以保留它的狀態或避免重新渲染

當然我們也可以根據元件來動態快取，我們知道vue-router是Vue官方給我們提供的一個路由元件：

<keep-alive>
 <router-view>
  <!-- 所有路徑匹配到的檢視元件都會被快取！ -->
 </router-view>
</keep-alive>

如果像上述程式碼這樣，我們的所有路由檢視都將被快取，我們這個時候就可以藉助我們的路由元資訊meta，那麼我們來修改一下程式碼實現動態快取：

思路：

meta路由元資訊物件裡面放著的是類似於區域性變數，在路由匹配的元件內部都能夠訪問得到，我們可以通過meta來定義一個自定義欄位來判斷標識頁面是否需要開啟快取：

// routes 配置
export default [
 {
 path: '/',name: 'home',component: Home,meta: {
  keepAlive: true // 需要被快取
 }
 },{
 path: '/:id',name: 'edit',component: Edit,meta: {
  keepAlive: false // 不需要被快取
 }
 }
]

 //通過v-if來動態的判斷展示
<keep-alive>
 <router-view v-if="$route.meta.keepAlive">
  <!-- 這裡是會被快取的檢視元件，比如 Home！ -->
 </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
 <!-- 這裡是不被快取的檢視元件，比如 Edit！ -->
</router-view>

以上這篇vue-router定義元資訊meta操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。