vue router 通过路由来实现切换头部标题功能


Posted in Javascript onApril 24, 2019

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

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

beforeRouterEnter:第一次进入时调用。

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

效果图如下:

vue router 通过路由来实现切换头部标题功能

注意看页面标题与图标变换

 路由元信息(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 通过路由来实现切换头部标题功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS获取农历日期具体实例
Nov 14 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
js实现全选反选不选功能代码详解
Apr 24 #Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 #Javascript
Vue源码解析之数据响应系统的使用
Apr 24 #Javascript
详解微信小程序文件下载--视频和图片
Apr 24 #Javascript
详解微信小程序之一键复制到剪切板
Apr 24 #Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 #Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 #Javascript
You might like
类的另类用法--数据的封装
2006/10/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python实现配置文件备份的方法
2015/07/30 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
对Python中画图时候的线类型详解
2019/07/07 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
学校消防演习方案
2014/02/19 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
工程部经理岗位职责
2015/02/02 职场文书
停电通知范文
2015/04/16 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书