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文件添加
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue实现Tab选项卡切换，点击不同标题显示对应图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue+axios+element ui 实现全局loading加载示例
今天小编就为大家分享一篇vue+axios+element ui 实现全局loading加载示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了如何基于Vue2实现数字纵向滚动效果,从而达到显示计时器滚动效果,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
使用VUE3开发很久了,但一直没进行总结和记录,下面这篇文章主要给大家介绍了关于从零开始搭建vue3项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-06-06
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
这篇文章主要介绍了Vue插槽_特殊特性slot,slot-scope与指令v-slot说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
今天小编就为大家分享一篇vue点击input弹出带搜索键盘并监听该元素的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue keep-alive中的生命周期,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了在vue项目中使用百度地图的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要为大家介绍了Vue3之元素和组件的动画切换实现示例详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了vue拦截器如何增加token参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论