浅谈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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
js实现图片放大展示效果
Aug 30 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 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
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
jQuery实现自定义下拉列表
2015/01/05 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Pytorch之finetune使用详解
2020/01/18 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
保密工作承诺书
2014/08/29 职场文书
项目合作协议书
2014/09/23 职场文书
认真学习保证书
2015/02/26 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
校车司机安全责任书
2015/05/11 职场文书
运动员入场前导词
2015/07/20 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Ruby处理YAML和json数据
2022/04/18 Ruby