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


Posted in Javascript onNovember 08, 2018

跟传统的页面可以在每个页面分别设置填写对应的页面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项目动态设置页面title及是否缓存页面的问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
JS高级程序设计之class继承重点详解
Jul 07 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 #Javascript
Vue实现简易翻页效果源码分享
Nov 08 #Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 #Javascript
详解如何创建并发布一个 vue 组件
Nov 08 #Javascript
webpack开发环境和生产环境的深入理解
Nov 08 #Javascript
webpack 开发和生产并行设置的方法
Nov 08 #Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 #Javascript
You might like
MySql中正则表达式的使用方法描述
2008/07/30 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP xpath()函数讲解
2019/02/11 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
python实现五子棋游戏
2019/06/18 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
如何将json数据转换为python数据
2020/09/04 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
实习单位意见
2015/06/04 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python