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

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

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

    if (to.meta.title) {函数

    document.title = to.meta.title
     }

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

    keepAlive: true
     }

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

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

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

  • 回到设置页面title的话题
    可是最近作过一个项目是基于vue的nuxt.js,路由是根据项目目录结构自动生成的,按以前的方法又行不通了,通过探索发现,nuxt.js项目设置title也不难,只需在对应的.vue文件添加
    图片描述

便可router

相关文章
相关标签/搜索