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,
  props:true,
  /*
  定義路由的時候可以配置 meta 字段，用于一些校驗，比如在導航守衛(wèi)中進行校驗，定義的值可以在$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

<template>
 <div>
  我是TestChild,查看動態(tài)路由參數(shù)name:{{name}}
 </div>
</template>
 
<script>
 export default {
  props:["name"],
  created () {
   //打印meta中定義的isRequiresAuth
   console.log(this.$route.meta.isRequiresAuth);
  },
 }
</script>
 
<style lang="scss" scoped>
 
</style>

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
  }
 },
]

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();
 }
})

<keep-alive>
 <component>
 <!-- 該組件將被緩存！ -->
 </component>
</keep-alive>

// 組件 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)或避免重新渲染

<keep-alive>
 <router-view>
  <!-- 所有路徑匹配到的視圖組件都會被緩存！ -->
 </router-view>
</keep-alive>

// 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>