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高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
无限级别菜单的实现
2006/10/09 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python descriptor(描述符)的实现
2020/11/15 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
培训主管的岗位职责
2013/11/23 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
警察思想汇报
2014/01/04 职场文书
教师旷工检讨书
2014/01/18 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
廉洁自律证明
2015/06/24 职场文书
预备党员入党感言
2015/08/01 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
配置Kubernetes外网访问集群
2022/03/31 Servers