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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
js事件委托和事件代理案例分享
Jul 25 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
js实现验证码干扰(静态)
Feb 22 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
PHP自动生成月历代码
2006/10/09 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
vue实现选中效果
2020/10/07 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python 读写、创建 文件的方法(必看)
2016/09/12 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python中的decorator的作用详解
2018/07/26 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python如何从键盘获取输入实例
2020/06/18 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
合伙协议书范本
2014/04/21 职场文书
社会调查研究计划书
2014/05/01 职场文书
演讲比赛策划方案
2014/06/11 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
六查六看六改心得体会
2014/10/14 职场文书
给老婆的检讨书
2015/01/27 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS