使用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 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
Element实现动态表格的示例代码
Aug 02 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中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
行政前台岗位职责
2013/12/04 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
机电一体化求职信
2014/03/10 职场文书
社区健康教育实施方案
2014/03/18 职场文书
公司授权委托书范本
2014/04/03 职场文书
安全目标管理责任书
2014/07/25 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
高二数学教学反思
2016/02/18 职场文书
年终工作总结范文
2019/06/20 职场文书