使用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得到网页中所有的div的id
Oct 19 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
老生常谈js中的MVC
Jul 25 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 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
PHP 调试工具Debug Tools
2011/04/30 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
浅析javascript 定时器
2014/12/23 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python实现批量按比例缩放图片效果
2018/03/30 Python
Django 路由控制的实现代码
2018/11/08 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
村干部承诺书
2014/03/28 职场文书
班级课外活动总结
2014/07/09 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
详解Python内置模块Collections
2022/03/22 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android