VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 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切换页面时更改标题的实例代码

    广而告之:
    热门推荐:
    ThinkPHP写第一个模块应用

    找到项目文件夹下面的Lib/Action这个目录,在下面有个创建好的例子IndexAction.class.php,加入我们创建的是admin这个项目,那么./admin/Lib/Action/IndexAction.class.php,这个模块是默认加载的模块。在ThinkPHP中,自动加载的动作、方法、操作等等都是以index命名的。···

    原生JS实现跑马灯效果

    效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; list-style: none; ···

    帝国CMS教程下载模型内容页模板显示下载点数

    帝国CMS教程-内容页显示下载点数,代码如下: <?php$down=explode("::::::",$navinfor[downpath]);?>点数:<?=$down[3]?>

    织梦DedeCMS清除文档数据后让文档ID默认从1开始的办法

    织梦默认的情况下载删除所有文档数据后,再发布文档就会发现默认的文档id不是从1开始了,这样对我们给别人做网站的人员来讲非常的不方便,添加的测试数据全部删除了也不能让id再从1开始。   下面我们就给大家分享一个方法,来让织梦清除了所有文档数据之后让文档id···

    yiic命令时提示“php.exe”不是内部或外部命令的解决方法

    本文实例讲述了yiic命令时提示“php.exe”不是内部或外部命令的解决方法,分享给大家供大家参考。具体方法如下: 在CMD中运行 yiic webapp work 如果报"php.exe"不是内部命令,是这样的:原因是Yii自带的yiic.bat找不到php.exe. 解决方法: 因为没有加入环境变量,所以无法直接执行php···

    JavaScript常用数学函数用法示例

    本文实例讲述了JavaScript常用数学函数用法。分享给大家供大家参考,具体如下: 一、代码 <script language="javascript"> <!-- document.write("欧拉常数e的值为(e属性):"+Math.E+"<br>"); document.write("2的自然对数为(LN2属性):"+Math.LN2+"<br>"···

    PHP实现的62进制转10进制,10进制转62进制函数示例

    本文实例讲述了PHP实现的62进制转10进制,10进制转62进制函数。分享给大家供大家参考,具体如下: 百度出来的无法使用,只好自己写,有bug的地方欢迎留言,感谢 function from62to10($str){ $dict = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; $···

    yii2实现分页,带搜索的分页功能示例

    一、模型配置 事例会用到三个models。文章类别表和文章表用gii生成下即可,最后一个是搜索验证模型。其中,只讲下一个联表和搜索验证。其他不用操作。 1.文章表关联 <?php //...other code //关联 public function getCate(){ return $this->hasOne(ArticleCa···

    Apache, PHP在Windows 9x/NT下的安装与配置 (一)

    在PHP邮件列表中问得最多的问题可能就是:“如何在我的Windows机器上安装PHP?”,那么也许我可以帮助回答这个问题。当你正确安装完成后,你会发现在Windows下开发PHP程序还是不错的。 本教程的目的是向你展示如何用“Apache和Windows”的组合来开发PHP程序。 教程中如未指···

    dedecms无错优化版全站调用购物车数量

    最近用织梦dedecms做商城的时候,需要运用到全站都需要调用购物车数量的情况,但是找遍了网上的帖子无果,其实复制来复制去真没意思,用审查工具查看后,调用的js显示的是出错的。如果你的错误是: Parse error: syntax error, unexpected '<' in E:\APMServ5.···