在做单页面应用程序时,一般页面布局头尾两块都是固定在布局页面,中间为是路由入口。这时访问页面时头部标题不会变,该问题的解决方案如下:

通过采用组件内路由卫士(beforeRouterEnter、beforeRouterUpdate)与路由元信息(meta) 来实现更新头部标题信息。点击查看文档

beforeRouterEnter:第一次进入时调用。

beforeRouterUpdate:重复使用当前组件时调用。

效果图如下:

注意看页面标题图标变换

路由元信息(meta)配置

在路由元信息中配置页面标题,通过组件内路由卫士获取

const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: "help",
name: "help",
meta: {
title: "新手帮助"
},
component: () => import('./views/Help.vue')
},
{
path: "page",
name: "page",
meta: {
title: "宝贝信息"
},
component: () => import('./views/Page.vue')
}
]
})

路由布局页面

header 与 footer 是固定头尾, main为路由入口。 title为页面标题

<template>
<div id="app">
<header class="header">
<button @click="back" class="t-xiaoxi iconfont" v-html="icon"></button>
<h1 class="t-title">{{title}}</h1>
<router-link to="/search" class="t-sousuo iconfont"></router-link>
</header>
<div class="main">
<router-view></router-view>
</div>
<footer class="footer">
      // ...
</footer>
</div>
</template>
在beforeRouteEnter、beforeRouteUpdate函数中获取路由元信息,并更新页面标题。
beforeRouteEnter:当第一次进入时,会被标题进行一次初始化操作
beforeRouteUpdate:当组件被重复调用时,执行更新操作。
<script>
export default {
name: "app",
data() {
return {
title: "我的网站",
url: '/',
icon: ''
}
},
methods: {
back() {
this.$router.go(this.url);
},
update(route) {
[this.title, this.url, this.icon] = ["我的网站", '/', ''];
if (!['', '/'].includes(route.path)) { // 判断是否根页面,用于切换标题与返回上一页或回到主页
[this.title, this.url, this.icon] = [route.meta.title || "", '-1', ''];
}
}
},
beforeRouteEnter(to, from, next) {
next(vm => { //回调函数,此时this指针不可用,可采用回调函数访问。
vm.update(to);
})
},
beforeRouteUpdate(to, from, next) {
this.update(to);
next();
}
};
</script>

vue-router 通过路由来实现切换头部标题的更多相关文章

  1. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  2. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  3. vue router 根据不同的id切换链接界面不刷新

    我们一般使用vue的router时候会根据不同的id来切换界面,但是界面没有立刻刷新.下面我们讲下如何解决这个问题. html: <template> <div id="a ...

  4. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  5. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  6. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  7. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  8. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  9. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

随机推荐

  1. MySQL 数据库字符集 utf8 和 utf8mb4 的区别

    参考于今日头条上Java芋道源码的-----记住:永远不要在 MySQL 中使用 UTF-8 字符集选择 MySQL 的 utf8 实际上不是真正的 UTF-8.utf8 只支持每个字符最多三个字节, ...

  2. Kubernetes集群部署史上最详细(二)Prometheus监控Kubernetes集群

    使用Prometheus监控Kubernetes集群 监控方面Grafana采用YUM安装通过服务形式运行,部署在Master上,而Prometheus则通过POD运行,Grafana通过使用Prom ...

  3. win10安装gitLab

    从控制面板选择hyper-V进行安装 1.打开控制面板选择程序=>选择启用或关闭windows功能=>选择Hyper-v 安装ubuntu 1.下载ubuntu系统(本次安装为18.04. ...

  4. 快速入门:弄懂Kafka的消息流转过程

    大家都知道 Kafka 是一个非常牛逼的消息队列框架,阿里的 RocketMQ 也是在 Kafka 的基础上进行改进的.对于初学者来说,一开始面对这么一个庞然大物会不知道怎么入手.那么这篇文章就带你先 ...

  5. 微信小游戏爆款秘笈 数据库MongoDB攻略篇

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB 发表于云+社区专栏 随着微信小游戏的爆发,越来越多开发者关注到MongoDB与小游戏业务的契合度. ...

  6. ArcGIS JS API多线程克里金插值

        最近做关于雨量插值的项目,本来使用后台的GP工具做的,但是处理时间比较长需要十几秒钟左右,所以研究怎么通过前台来计算.     参考下克里金例子,思路是生成要计算区域的100乘以100网格,然 ...

  7. svn版本控制迁移到git

    获得原 SVN 仓库使用的作者名字列表 因为导入到git需要配置原作者(svn提交人)和git账户的映射关系 其格式为: vim authors-transform.txt taoxs = xsTao ...

  8. 重庆3Shape TRIOS都有哪些功能

    1.高质量的临床结果高准确度的数字化印模确保高质量的修复体密合度即时制备和印模确认就位修复体时无需多次调整和研磨2.轻松取模无需喷粉扫描无需印模材料,可保持操作台整洁无需重复取模3.更稳健的业务联系加 ...

  9. 使用正则替换script及其内容

    因做微信公众号文章保存,发现他的js大多数也用不着,所以就想着用正则替换掉源代码中的js片段 正则代码: <script(?:[^<]++|<(?!/script>))*+&l ...

  10. 一分钟上手artTemplate

    一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...