欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-router中元信息meta的妙用

程序员文章站 2022-07-05 14:54:36
1、配置此路由的标题title 2、配置组件是否需要缓存 ......
{
    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>