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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
理解Javascript的call、apply
Dec 16 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
建筑项目策划书
2014/01/13 职场文书
大学社团活动总结
2014/04/26 职场文书
机械专业技术员求职信
2014/06/14 职场文书
法学自荐信
2014/06/20 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
计划生育证明书写要求
2014/09/17 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
停电放假通知
2015/04/14 职场文书
红色经典观后感
2015/06/18 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
MySQL 数据库范式化设计理论
2022/04/22 MySQL