【Vue】如何动态的更新页面的Title

Vue文件的特殊性并不是一个html页面 以往我们在head里面通过设置meta title来改变页面的办法算是行不通了

可以用路由守卫 + VueRouter来实现

路由守卫相关文档

首先我们先要在main.js里加入路由守卫

// 页面修改时修改浏览器标签栏
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    }
    next()
})

然后再在我们的Router.js里面加入meta.title的属性类似这样:

        path: '/',
        name: 'Login',
        component: Login,
        meta:{
            title:'登录'
        }

然后就可以了啦嘤嘤嘤 只是个记录啦 我只是怕自己忘记了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

WordPress 开发之使用WordPress 3.8+后台图标(dashicons)

伴随着WordPress 3.8 的新界面,WordPress 官方为后台UI 引进了目前贼流行的webfont(又称 icon font),官方独立项目名为d...

20880
来自专栏程序员的知识天地

微信小程序的组件用法与传统HTML5标签的区别

小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。

27720
来自专栏菩提树下的杨过

jQuery中排除指定元素,同时选择剩下的所有元素

场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

25050
来自专栏编程

滴滴开源基于 Vue.js 的移动端组件库 cube-ui

综合自:https://didi.github.io/cube-ui/ ? 继 6 月份开源Android 端插件化框架 VirtualAPK后,滴滴近日又开源...

47100
来自专栏walterlv - 吕毅的博客

像黑客一样!Chrome 完全键盘操作指南(原生快捷键 + Vimium 插件)

发布于 2018-07-01 11:56 更新于 2018-07...

21320
来自专栏ThoughtWorks

TW洞见〡现代Web页面开发流程

现代Web页面开发流程 通常来说,Web页面开发的流程大致是这样的:设计师(设计师不是美工,就像程序员不是码农一样)提供设计稿,通常是图片格式。然后前端的开发...

40260
来自专栏vue学习

28、购物车结算页面-导航栏与地址选择布局

(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue

48330
来自专栏菩提树下的杨过

haXe下体验jQuery

看了铁哥关于haXe的介绍,忍不住体验了一吧: 一、下载安装flashdevelop http://flashdevelop.org/ 到这上面下载最新的fla...

22070
来自专栏贺嘉的专栏

如何用Baas快速在腾讯云上开发小程序之系列4:实现客户侧商品列表、商品详情页程序

本文将分享如何在腾讯云上实现小程序的商品展示和数据库查询操作。通过实现商品列表、商品详情页程序,熟练掌握云端数据表查询操作,包括掌握小程序调试方法、掌握小程序操...

1.2K00
来自专栏HTML5学堂

CSS引入方式

HTML5学堂:CSS引入方式存在三种,分别为标签内联书写、页面头部书写、外部引入,那么这三者有何区别?本文给大家讲解了从不同的角度分析他们的优势与劣势。 1、...

32460

扫码关注云+社区

领取腾讯云代金券