使用vue-router设置每个页面的title方法


Posted in Javascript onFebruary 11, 2018

基本环境配置: webpack + vue2.0 + vue-router +nodeJS

进入 router 文件夹底下的index.js文件

首先引入:

import Vue from 'vue'
import Router from 'vue-router'

然后在路由里面配置每个路由的地址:

routes: [
 {   /* (首页)默认路由地址 */
  path: '/',
  name: 'Entrance',
  component: Entrance,
  meta: {
  title: '首页入口'
  }
 },
 {   /* 修改昵称 */
  path: '/modifyName/:nickName',
  name: 'modifyName',
  component: modifyName,
  meta: {
  title: '修改昵称'
  }
 },
 {   /* 商品详情 */
  path: '/goodsDetail',
  name: 'goodsDetail',
  component: goodsDetail,
  meta: {
  title: '商品详情'
  }
 },
 { /* Not Found 路由,必须是最后一个路由 */
  path: '*',
  component: NotFound,
  meta: {
  title: '找不到页面'
  }
 }
 ]

在每一个meta里面设置页面的title名字,最后在遍历

router.beforeEach((to, from, next) => {
 /* 路由发生变化修改页面title */
 if (to.meta.title) {
 document.title = to.meta.title
 }
 next()
})

这样就为每一个VUE 的页面添加了title

以上这篇使用vue-router设置每个页面的title方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 #Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 #Javascript
vue.js,ajax渲染页面的实例
Feb 11 #Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 #Javascript
vue中引用阿里字体图标的方法
Feb 10 #Javascript
Express进阶之log4js实用入门指南
Feb 10 #Javascript
Vue完整项目构建(进阶篇)
Feb 10 #Javascript
You might like
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python的类方法和静态方法
2014/12/13 Python
Python魔术方法详解
2015/02/14 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python绘制地震散点图
2019/06/18 Python
Python新手学习函数默认参数设置
2020/06/03 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
大码女装:Ulla Popken
2019/08/06 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
辞职信标准格式
2015/02/27 职场文书
护士求职自荐信范文
2015/03/04 职场文书
大学生逃课检讨书
2015/05/04 职场文书
电影圆明园观后感
2015/06/03 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS