浅谈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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
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
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
import的本质解析
2017/10/30 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
小学安全教育材料
2014/02/17 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
护士个人年终总结
2015/02/13 职场文书
客户付款通知书
2015/04/23 职场文书
工作时间证明
2015/06/15 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python