进入 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的更多相关文章

  1. vue项目设置每个页面的title

    1.在项目目录下安装vue-wechat-title 2.在main.js中 使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-we ...

  2. Vue设置页面的title

    原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html 前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个inde ...

  3. 获取页面的title值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. python抽取指定url页面的title方法

    python抽取指定url页面的title方法 今天简单使用了一下python的re模块和lxml模块,分别利用的它们提供的正则表达式和xpath来解析页面源码从中提取所需的title,xpath在完 ...

  5. Vue是如何渲染页面的,渲染过程以及原理代码

    Vue是如何渲染页面的,渲染过程以及原理代码:https://www.cnblogs.com/ypinchina/p/7238402.html

  6. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  7. .Net语言 APP开发平台——Smobiler学习日志:如何设置页面的title

    1.修改Mobile Form的TitleText的属性 输入需要显示标题,如图1: 2.修改Mobile Form的TitleStyle属性 其中包括Image属性(窗体图标).BackColor属 ...

  8. java后台修改ZK页面的title

    Clients.evalJavaScript("document.title='"+basicDBObject.getString("systemName")+ ...

  9. 每个页面的Title样式

    <style>.zc_lan14 {}{    TEXT-ALIGN: center; FONT-FAMILY: "微软雅黑"; MARGIN-BOTTOM: 3px; ...

随机推荐

  1. [java变量] - 字符串数组转long型数组

    //定义字符串 String str = "1,3,6,9,4,2,1,6"; //截取字符串 String[] strArr = str.split(",") ...

  2. 【转载】常用 Java 静态代码分析工具的分析与比较

    摘自:http://www.oschina.net/question/129540_23043常用 Java 静态代码分析工具的分析与比较 简介: 本文首先介绍了静态代码分析的基本概念及主要技术,随后 ...

  3. Linux安装Broadcom无线驱动

    参考https://blog.csdn.net/u012833250/article/details/52493806 首先查看自己的网卡型号,然后先执行sudo apt-get update 再根据 ...

  4. python学习 day011打卡 迭代器

    本节的主要内容: 1.函数名的使用以及第一类对象 2.闭包 3.迭代器 一.函数名的运用. 函数名是一个变量,但它是一个特殊的变量,与括号配合可以执行函数的变量. 1.函数名的内存地址 def fun ...

  5. 一:requests爬虫基础

    一,什么是爬虫? 描述: 本质是一个自动化程序,一个模拟浏览器向某一个服务器发送请求获取响应资源的过程. 爬虫的基本流程 robots.txt协议 编写一个robots.txt的协议文件来约束爬虫程序 ...

  6. java之双缓冲的代码粘贴

    private Image offScreenImage = null; public void update(Graphics g) { if(offScreenImage == null) off ...

  7. SQL中 根据行号设置每行数据的排序数值

    根据行号自动把当前行号插入到某列中 实现排序 update tempTable set DisplayOrder = right( CAST(rownum as NVARCHAR),5) from(  ...

  8. npm ERR! missing script: dev 报错解决

    npm run dev 报错:missing script:dev 今天在运行Vue项目时,在运行npm  run dev时报错如下图: 打开package.js文件夹,发现文件夹里的scripts有 ...

  9. 《剑指offer》第六十一题(扑克牌的顺子)

    // 面试题61:扑克牌的顺子 // 题目:从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的. // 2-10为数字本身,A为1,J为11,Q为12,K为13,而大.小王可以看成任意 ...

  10. python实现邮件接口——smtplib模块

    1. 思路 使用脚本发送邮件的思路其实和客户端发送邮件一样,过程都是: 登录 —> 写邮件 —> 发送 只不过通过脚本发送时我们需要考虑到整个过程的方方面面.以下为思路导图: 2. Pyt ...