使用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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
使用js实现数据格式化
Dec 03 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
js倒计时显示实例
2016/12/11 Javascript
Vue.use源码分析
2017/04/22 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python输出各行命令详解
2018/02/01 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Python如何操作docker redis过程解析
2020/08/10 Python
什么是serialVersionUID
2016/03/04 面试题
房地产营销策划方案
2014/02/08 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
督导岗位职责
2015/02/04 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python