交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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动态修改网页标题的方法及遇到问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    您可能感兴趣的文章:

    • vue router 通过路由来实现切换头部标题功能
    • vue2.0 下拉框默认标题设置方法
    • Vue Spa切换页面时更改标题的实例代码

    广而告之:
    热门推荐:
    Html5实现二维码扫描并解析

    引子: 最近公司项目有个需求,微博客户端中, h5 的页面上的某个按钮能够与native 交互呼起摄像头,扫描二维码并且解析。在非微博客户端中(微信或者是原生浏览器,如:safari)呼起系统的拍照或者上传图片按钮,通过拍照或者上传图片解析二维码。 第二种方案需要在前端 js 解···

    微信小程序实现多个按钮的颜色状态转换

    本文实例为大家分享了微信小程序实现按钮颜色状态转换的具体代码,供大家参考,具体内容如下 效果图片:  index.wmxl文件 <block wx:for="{{pres}}"> <view class='foot_tab' data-id="{{index}}" style="{{index==id? 'color:rgb(91, 207, 97)':'colo···

    在linux命令下导出导入.sql文件的方法

    本文讲述了在linux命令下导出导入.sql文件的方法。分享给大家供大家参考,具体如下: 一、导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径): 1、导出数据和表结构: mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql #/usr/local/mysql/bin/ mysqld···

    js iframe跨域访问(同主域/非同主域)分别深入介绍

    js跨域是个讨论很多的话题。iframe跨域访问也被研究的很透了。 一般分两种情况: 一、 是同主域下面,不同子域之间的跨域;   同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.docum···

    php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】

    本文实例讲述了php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法。分享给大家供大家参考,具体如下: 下面这几个方法将能够帮你解决这个问题。 PHP版将html中的<br />换行符转换为文本框中的换行符: 代码如下: function br2nl($text){ return p···

    解决vue attr取不到属性值的问题

    js: $(document).ready(function() { $.get("/account/authGroupInfo",{id:groupId}, function(data) { var arr = data.data.rules.split(","); console.log(arr); $.get("/account/allRule",{}, function(result) { ruleList.options = result.data; //···

    js获取内联样式的方法

    本文实例讲述了js获取内联样式的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high···

    超强图片数量上传无限制

    无 有  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] function createForm(number,number2) {data = ""; if (number<=number2){alert('请输入大于'+number2+'的数字');return false;}numberx=parseInt(number2)+1;for (i=numberx; i<=number;i++) {···

    PHP使用方法重载实现动态创建属性的get和set方法

    在PHP中,我们不能够直接通过方法名相同,签名不同的方法来实现方法重载,因为PHP是弱数据类型,不能很好的区分签名。但是,可以在PHP的类中运用__call()方法来实现方法重载。当调用一个类中并不存在的方法时,会自动调用__call()方法,其形式为__call($name,$arguments) 其中$···

    javascript eval函数深入认识

    (1)介绍javascript中的eval函数的用法 (2)如何在函数内执行全局代码 ►先来说eval的用法,内容比较简单,熟悉的可以跳过。 eval函数接收一个参数s,如果s不是字符串,则直接返回s。否则执行s语句。如果s语句执行结果是一个值,则返回此值,否则返回undefined。 ···