浅谈vue2 单页面如何设置网页title


Posted in Javascript onNovember 08, 2017

前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。

推荐使用vue-wechat-title插件

下载安装插件依赖

npm install vue-wechat-title --save

在main.js中引入插件

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

在路由文件 index.js中给每个路由添加title

routes: [{
  path: '/',
  name: 'index',
  component: index,
  meta:{
    title:'首页' // 标题设置在这里
  }
 },{
  path:'/detail',
  name:'detail',
  component:detail,
  meta:{
    title:'详情页' // 标题设置在这里
  }
 }]

在app.vue中修改router-view组件

<router-view v-wechat-title='$route.meta.title'></router-view>

重启试试,可以了

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

Javascript 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
js获取页面description的方法
May 21 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
js使用xml数据载体实现城市省份二级联动效果
Nov 08 #Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 #Javascript
javascript自定义事件功能与用法实例分析
Nov 08 #Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 #Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 #Javascript
You might like
php初始化对象和析构函数的简单实例
2014/03/11 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python函数形参用法实例分析
2015/08/04 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python实现两个文件合并功能
2018/04/01 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python读文件的步骤
2019/10/08 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
NumPy统计函数的实现方法
2020/01/21 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
高一政治教学反思
2014/01/28 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
课外活动实习计划
2015/01/19 职场文书
节水倡议书
2015/01/19 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
信用卡工资证明范本
2015/06/19 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python