使用vue-router设置每个页面的title方法

基本环境配置： 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方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 浅谈vue2 单页面如何设置网页title
赞 (0)

相关推荐

  • 浅谈vue2 单页面如何设置网页title

    前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次.对于现在的前端框架,传统的每个页面设置title标签的做法是不行的. 推荐使用vue-wechat-title插件 下载安装插件依赖 npm install vue-wechat-title --save 在main.js中引入插件 import VueWechatTitle from 'vu

  • 使用vue-router设置每个页面的title方法

    基本环境配置: 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: '首页入口

  • vue利用vue meta info设置每个页面的title与meta信息

    title: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 #文章页面上的显示名称,一般是中文 date: 2019-11-20 16:30:16 #文章生成时间,一般不改,当然也可以任意修改 categories: vue #分类 tags: [vue] #文章标签,可空,多标签请用格式,注意:后面有个空格 description: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 如需使用 vue-meta-

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

    今天简单使用了一下python的re模块和lxml模块,分别利用的它们提供的正则表达式和xpath来解析页面源码从中提取所需的title,xpath在完成这样的小任务上效率非常好,在这里之所以又使用了一下正则表达式是因为xpath在处理一些特殊的页面的时候会出现乱码的情况,当然这不是xpath的原因,而是页面本身编码,跟utf-8转码之间有冲突所致,这里看代码: # !/usr/bin/python #-*-coding:utf-8-*- ''' 功能:抽取指定url的页面内容中的title '

  • 在vue里面设置全局变量或数据的方法

    实例如下: const MyPlugin = { // install方法是必需的 // // 包含两个参数:Vue 构造器,一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; } }; export default MyPlugin 此方法可以单独起一个文件,在引入到需要的页面里面,就可以用vue实例取到相应数据,像

  • vue: WebStorm设置快速编译运行的方法

    WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试. 本文介绍设置Webstorm进行快速部署Vue项目. 第一步 点击启动快捷按钮旁边的向下小箭头,在列表中选择Edit选项: 第二步 打开启动设置页面后,点击左上角的加号添加新的运行方式: 第三步 在弹出的选择框中,选择node.js启动模式: 第四步 在新打开的设置页面中,在红色圈中的地方设置如图路径的文件: 至此设置成功,直接点启动按钮就可以部署项目. 以上这篇vue:

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • html-webpack-plugin修改页面的title的方法

    vue-cli2.X:修改config目录下index.js const title = '标题1' // const title = '标题2' // const title = '标题3' module.exports = {     title: title,     dev: { ... },     build: { ... },     test: { ... } 接着就可以在webpack.dev.conf.js, webpack.prod.conf.js中的HtmlWebpack

  • 在父页面调用子页面的JS方法

    今天弄了一天了,终于在网上找到了解决办法 注意:问题是在父页面调用子页面的方法..... 父页面:parent.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.o

  • 基于Vue的SPA动态修改页面title的方法(推荐)

    最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点:App.Vue默认的e

  • vue实现路由跳转动态title标题信息

    目录 路由跳转动态title标题信息 vue动态改变title 需求 解决需求一 解决需求二 路由跳转动态title标题信息 想要让浏览器的标题,随着vue的路由跳转的改变而改变,就要配置router/index.js文件里的信息.在meta对象里面配置一个title. {     path: "/",     name: "Home",     meta: {       title: "首页"//这是重点     },     compone

随机推荐