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

更新时间：2018年11月08日 11:49:32 作者：barry_mr_杨

这篇文章主要介绍了vue项目动态设置页面title及是否缓存页面的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了。

下载

npm install vue-wechat-title --save

在mian.js中引入

//设置title
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

在router的index.js的路由中加上参数

 {
  path: '/login',
  component: Login,
  meta: {
  title: '登录'
  }
 }

如果是公共组件，在跳转时根据条件来动态设置title，可以在最外层的div上设置v-wechat-title="$route.meta.title"再动态去改变title即可

<template>
 <div class="hours-con container" v-wechat-title="$route.meta.title">
   .....
 </div>
</template>


//js动态设置,即可在跳转页面时根据条件改变title了
if(zong){
 this.$route.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文件添加

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2.x 对象劫持的原理实现
这篇文章主要介绍了vue2.x 对象劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue-admin-template配置快捷导航的代码（标签导航栏）
这篇文章主要介绍了vue-admin-template配置快捷导航的方法（标签导航栏），本文通过实例代码给大家介绍的非常详细，对大家学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-09-09
vue动态绑定多个类名方法详解(:class动态绑定多个类名)
vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下
2022-11-11
Vue-router结合transition实现app前进后退动画切换效果的实例
下面小编就为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue中view-model双向绑定基础原理解析
这篇文章主要介绍了vue中view-model双向绑定基础原理，文中给大家介绍了vue双向绑定的原理总结，本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-10-10
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
这篇文章主要介绍了解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue实现随机验证码功能的实例代码
这篇文章主要介绍了vue实现随机验证码功能的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
ant-design-vue导航菜单a-menu的使用解读
这篇文章主要介绍了ant-design-vue导航菜单a-menu的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue watch监听变量值的实时变动示例详解
这篇文章主要介绍了vue 监听变量值的实时变动 watch,使用字符串形式的侦听器函数,还有一种是使用函数形式的侦听器函数,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-08-08
vue3使用element ui的方法实例
vue3出来好一段时间了,一直想着用一下,下面这篇文章主要给大家介绍了关于vue3使用element ui的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10