使用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 相关文章推荐
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
对python pandas 画移动平均线的方法详解
2018/11/28 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python占用的内存优化教程
2019/07/28 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
python爬虫用mongodb的理由
2020/07/28 Python
python中if嵌套命令实例讲解
2021/02/25 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
运动会广播稿200字
2014/01/15 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
教师党员个人总结
2015/02/10 职场文书
学校捐书倡议书
2015/04/27 职场文书
2019秋季运动会口号
2019/06/25 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技