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 相关文章推荐
js切换光标示例代码
Oct 10 Javascript
ajax与302响应代码测试
Oct 23 Javascript
Augularjs-起步详解
Jul 08 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
python中cPickle用法例子分享
2014/01/03 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python url 参数修改方法
2018/12/26 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
如何基于python实现归一化处理
2020/01/20 Python
用 Python 制作地球仪的方法
2020/04/24 Python
用python绘制樱花树
2020/10/09 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
最新大学生创业计划书写作攻略
2014/04/02 职场文书
购房协议书范本
2014/10/02 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript