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 相关文章推荐
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
jquery实现页面加载效果
Feb 21 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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
PHP DataGrid 实现代码
2009/08/12 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Python自定义线程池实现方法分析
2018/02/07 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
学习python需要有编程基础吗
2020/06/02 Python
python 6行代码制作月历生成器
2020/09/18 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
Python学习之time模块的基本使用
2021/01/17 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
主管会计岗位职责
2014/03/13 职场文书
2014年清明节寄语
2014/04/03 职场文书
航空学院求职信
2014/06/11 职场文书
公司委托书格式
2014/08/01 职场文书
公司经营目标责任书
2015/01/29 职场文书
小学重阳节活动总结
2015/03/24 职场文书
2015入党自传格式范文
2015/06/26 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python