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弹出窗口代码大全(详细整理)
Dec 21 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
微信小程序异步处理详解
Nov 10 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
js+css3实现简单时钟特效
Sep 13 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
详解js中的几种常用设计模式
2020/07/16 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python查找第k小元素代码分享
2013/12/18 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
学习python的前途 python挣钱
2019/02/27 Python
python 整数越界问题详解
2019/06/27 Python
Python实现把类当做字典来访问
2019/12/16 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
业务员岗位职责
2013/11/16 职场文书
员工考核管理制度
2014/02/02 职场文书
市场专员岗位职责
2014/02/14 职场文书
小班评语大全
2014/05/04 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
信仰心得体会
2014/09/05 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
送达通知书
2015/04/25 职场文书
创业计划书之寿司
2019/07/19 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android