Vue动态修改网页标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三).
Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案:
一、最笨方案
结合业务直接在Vue生命周期函数 created 和 mounted 中,给 document.title赋值。
- <script>
- import axios from 'axios'
- export default {
- created () {
- document.title = '功能授权'
- },
- mounted() {
- axios.get('***').then((d)=>{
- document.title = '功能授权('+ d.Name + ')'
- })
- }
- }
- </script>
二、普通方案,使用Vue-Router的beforeEach拦截
项目中使用了Vue Router,在路由文件 index.js 中给需要的路由添加 title。
- routes: [{
- path: '/',
- name: 'home',
- component: () => import('@/pages/home/index'),
- meta:{
- keepAlive: true
- }
- },
- {
- path: '/person/auth,
- name: 'personAuth',
- component: () => import('@/pages/person/auth),
- meta:{
- title: '功能授权',
- keepAlive: false
- }
- }
- ]
在路由的beforeEach 拦截器里处理
- router.beforeEach((to, from, next) => {
- /* 路由发生变化修改页面title */
- if (to.meta.title) {
- document.title = to.meta.title
- }
- })
如果想在页面上依据加载的内容不同再变更title时,请参考方式一的 mounted函数处理逻辑.
三、优雅方案,使用Vue 自定义指令(directive)
如前文所提,页面获取不同数据状态时,需要展示不同的标题。那么我们可以结合vue 自定义指令(directive)可更优雅的处理网页标题的动态更新。
自定义指令 v-web-title的定义
- export default {
- inserted: function (el, binding) {
- const { value } = binding
- if (el.dataset.title) { // 方式1,可以给标签的data-title的属性赋值
- document.title = el.dataset.title
- } else if (value && value.title) { // 方式2,指令传参
- document.title = value.title
- }
- },
- update (el, binding, vnode, oldVnode) {
- const { value } = binding
- if (el.dataset.title) {
- document.title = el.dataset.title
- } else if (value && value.title) {
- document.title = value.title
- }
- }
- }
在页面上使用v-web-title有两种方式
1.给标签 data-title属性赋值
- <template>
- <div v-web-title
- :data-title="textTitle">
- </template>
- <script>
- import axios from 'axios'
- export default {
- data(){
- return {
- textTitle:'功能授权'
- }
- },
- mounted () {
- axios.get('***').then((d) => {
- this.textTitle = '功能授权(' + d.Name + ')'
- })
- }
- }
- </script>
2.给指令传参
- <template>
- <div v-web-title="{title:textTitle}">
- </template>
- <script>
- import axios from 'axios'
- export default {
- data(){
- return {
- textTitle:'功能授权'
- }
- },
- mounted () {
- axios.get('***').then((d) => {
- this.textTitle = '功能授权(' + d.Name + ')'
- })
- }
- }
- </script>
四、参考
1. vue单页面应用中动态修改title 主要介绍使用vue-weachat-title组件
2.vue.js自定义指令详解 主要介绍自定义指令的钩子函数,以及指令传参等
Vue动态修改网页标题的更多相关文章
- jquery无法修改网页标题,无法修改网页标题
今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...
- Vue 动态修改data 值 并触发视图更新
Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新
- 微信小程序动态修改页面标题setNavigationBarTitle
微信小程序是可以动态修改页面标题的. 首先我们来看看静态是怎么实现的 在对应页面的json文件里面加入下面代码就可以实现了 { "navigationBarTitleText": ...
- vue动态修改title
1.项目中,cmd下 ,运行:cnpm install vue-wechat-title --save 2.在 main.js 中,设置: import VueWechatTitle from 'vu ...
- 小程序动态修改页面标题setNavigationBarTitle
可以使用setNavigationBarTitle方法动态设置页面标题 wx.setNavigationBarTitle({ title: options.name, })
- 如何动态修改网页的标题(title)?
有时候我们需要复用一个页面,但是又希望他们拥有各自的标题,这时候就需要动态的去更改页面的title了,不然所有页面都是一个标题. 这时候就会想到使用js或jQuery去实现了. 1.js方式. 首先, ...
- 使用JS动态修改网页body的背景色
大部分网页默认的背景色为白色,个人感觉比较刺眼,于是写了个JS的脚本去改变body部分的背景色,代码如下: // ==UserScript== // @name ChangeBackgroundCol ...
- Vue动态修改class
#####对象方法-最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染) :class="{ 'active': isActive }"1判断是否绑定一个act ...
- MFC 动态修改对话框标题
在对应对话框的初始化函数OnInitDialog()中添加以下代码: CString title; title.Format("%d",Id);//在标题栏动态显示Id的值 thi ...
随机推荐
- 常见跨域解决方案以及Ocelot 跨域配置
常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的时候,如果前端项目和api项目不是一个域名下往往会有跨域问题.今天来介绍一下我们在Ocelot网关配置的跨域 ...
- java.lang.ClassNotFoundException: XXX (no security manager: RMI class loader disabled)
在搞RMI远程发布,consumer去获取rmi远程服务的代理对象的时候出现了如下的错误 问题发现: 由于我发布的对象的包路径和获取的对象的包路径不一致,导致了这样的问题 解决方案: 包路径改为一致就 ...
- 死磕 java同步系列之ReentrantLock VS synchronized——结果可能跟你想的不一样
问题 (1)ReentrantLock有哪些优点? (2)ReentrantLock有哪些缺点? (3)ReentrantLock是否可以完全替代synchronized? 简介 synchroniz ...
- 诚聘.NET架构师、高级开发工程师(2019年8月29日发布)
招聘单位是ABP架构设计交流群(134710707)群主阳铭所在的公司 公司简介 七二四科技有限公司成立于2015年,成立之初便由金茂资本按估值2亿投资2200万,进行“健康724”平台搭建,2017 ...
- Mac下安装adb
1.检查是否安装adb briandeMacBook-Pro:~ brian$ adb -bash: adb: command not found briandeMacBook-Pro:~ brian ...
- 易优CMS:volist的基础应用
[基础用法] 名称:volist 功能:数据/记录循环输出标签 语法: {eyou:channel type='top'} {eyou:volist name='$field ...
- 易优CMS:type的基础用法
[基础用法] 名称:type 功能:获取指定栏目信息 语法: {eyou:type typeid='栏目ID' empty='暂时没有数据'} <a href="{$field.typ ...
- JavaEE之Hibernate(开放源代码的对象关系映射框架)
Hibernate(开放源代码的对象关系映射框架) 1.简介 Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全 ...
- kali linux maltego-情报收集工具
Maltego是一个交互式数据挖掘工具,它为链接分析呈现有向图.该工具用于在线调查,以发现互联网上各种来源的信息片段之间的关系. 注册Maltego账号,注册地址:https://www.paterv ...
- 使用odbc从notes中导数据,配置odbc时报错
上次在配置odbc从notes中导数据时一直报错(忘记是什么错误了),后来,尝试着把notes和notesSQL的路径加入到path中就OK了!