Vue Spa切换页面时更改标题的实例代码


Posted in Javascript onJuly 15, 2017

在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx";

随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖。

<script>
export default {
  data(){
    return{
    }
  },
  created(){
    document.title="首页"
  },
}
</script>

于是在github上找到一个好用的东西 vue-wechat-title

通过 npm install vue-wechat-title  安装

引入需要的vue-router与页面需要的组件之后

const router = new VueRouter({
  mode: 'history',
  routes:[
    {
    name: 'index',
    path: '/',
    meta: {
        title: '首页'
     },
     component: index
    },
   {
     name: 'root',
     path: '/root', 
     meta: {
        title: '肉特'
    },
    component: root
    }  
 ]
});
Vue.use(require('vue-wechat-title')); //实例化参数

在组件中顶部添加一段 <div v-wechat-title="$route.meta.title"></div>

即可实现改变title效果。

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

Javascript 相关文章推荐
JavaScript 常用函数
Dec 30 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
async/await地狱该如何避免详解
May 10 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
Vue应用部署到服务器的正确方式
Jul 15 #Javascript
js+html5实现侧滑页面效果
Jul 15 #Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 #Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 #Javascript
js编写简单的计时器功能
Jul 15 #Javascript
深入理解angular2启动项目步骤
Jul 15 #Javascript
js+html5实现复制文字按钮
Jul 15 #Javascript
You might like
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
Yii学习总结之安装配置
2015/02/22 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
py-charm延长试用期限实例
2019/12/22 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
综治宣传月活动总结
2014/04/28 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript