vue项目动态设置页面title及是否缓存页面

  • 跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了。
  • 首先,找到之前配置好的路由文件,在对应页面路由中添加如下配置即可:
    meta: {

       title: '我是页面title'
     }
  • 然后再main.js中的路由钩子函数router.beforeEach添加

    if (to.meta.title) {

       document.title = to.meta.title
     }
    

    说到路由添加meta配置,还有一个比较常用的是keepAlive,它可以设置页面是否缓存,具体如下:
    meta: {

       keepAlive: true
     }

    然后设置.vue文件的router-view
    <keep-alive>

     <router-view v-if="$route.meta.keepAlive"></router-view>

    </keep-alive>
    /启用页面缓存/
    <router-view v-if=”!$route.meta.keepAlive”></router-view>
    /页面不缓存/

  • 回到设置页面title的话题
    但是最近做过一个项目是基于vue的nuxt.js,路由是根据项目目录结构自动生成的,按之前的方法又行不通了,经过探索发现,nuxt.js项目设置title也不难,只需在对应的.vue文件添加
    《vue项目动态设置页面title及是否缓存页面》

即可

    原文作者:barry_mr_杨
    原文地址: https://segmentfault.com/a/1190000016940875
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞