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 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
destoon二次开发入门示例
2014/06/20 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js读取cookie方法总结
2014/10/31 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python字符串的常见操作实例小结
2019/04/08 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
华为慧通笔试题
2016/04/22 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
五年级英语教学反思
2014/01/31 职场文书
辞职信的写法
2015/02/27 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
python获取字符串中的email
2022/03/31 Python
Python闭包的定义和使用方法
2022/04/11 Python