使用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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
Jquery 效果使用详解
Nov 23 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
js实现点击生成随机div
Jan 16 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 foreach正序倒序输出示例代码
2014/07/01 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python输出决策树图形的例子
2019/08/09 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python中zip函数如何使用
2020/06/04 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
公司捐款倡议书
2014/05/14 职场文书