vue-router中元信息meta的妙用

{
    path:"/test",
    name:"test",
    component:()=>import("@/components/test"),
    meta:{
        title:"測試頁面", //配置title
        keepAlive: true //是否緩存
    }
}

1、配置此路由的標題title

//main.js中的代碼
router.beforeEach((to,from,next)=>{
    if(to.meta.title){
        document.title=to.meta.title
    }
    next()
})

2、配置組件是否需要緩存

<!-- app.vue中的代碼 -->
<!-- 需要被緩存的路由入口 -->
<keep-alive>  
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 不需要被緩存的路由入口 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>