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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
python基础教程之循环介绍
2014/08/29 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
对python Tkinter Text的用法详解
2018/10/11 Python
详解python:time模块用法
2019/03/25 Python
python 函数中的参数类型
2020/02/11 Python
python实现简单的购物程序代码实例
2020/03/03 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python 随机按键模拟2小时
2020/12/30 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2014年财务科工作总结
2014/11/11 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
python manim实现排序算法动画示例
2022/08/14 Python