在这个mvvm流行的今天,大家为了体验也是很拼的。

大部分mvvm都是单页面应用,在路由切换时不像传统页面一样重新下载整个html文件,这样就无法对页面标题进行更新。造成整个应用内页面标题和实际内容不相符,虽说不影响使用,但强迫症患者还是忍受不了。

因为用到vue-router之前一直想通过路由切换实现,但是搜索很久也没找到合适的方法。

今天再次查看vue的文档,突然想到可以通过自定义指令来实现。

具体思路如下,很简单只需要两步就可实现:

1.首页我们注册一个全局指令

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.innerText
    el.remove()
  }
})

2.在需要更改页面标题的组件内调用我们刚注册的指令

<div v-title>标题内容</div>

当当当,就这样喽。

这里是用innerText来实现标题更新,如果你嫌弃这里多了一个无用div,还可以通过指令绑定值的方式实现

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = binding.value
  }
})

<div v-title="'标题内容'">
……组件内的内容
这里的div可以是你组件内的任何标签
</div>

因为指令函数能够接受所有合法类型的 Javascript 表达式,所以这里你要注意一下要对绑定的值加上引号。

什么?不想多一个无用的div,又看不惯多出的引号,稍稍变通一下就可以了

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

<div v-title data-title="标题内容">
……组件内的内容
这里的div可以是你组件内的任何标签
</div>

你可能感兴趣的文章

6 条评论
千泓 · 2016年11月08日

根本就不需要这样咯,直接index.html里边的<title v-text="titleMsg"></title>,定义titleMsg默认值,这个如果App.vue是父组件,子组件里边想控制这个值可以使用this.$parent.data.titleMsg,如果App.vue是实例可以使用this.$root.data.titleMsg去控制

回复

千泓 · 2016年11月08日

回复

kapta · 2016年11月24日

router 的 meta 属性可以随便配置参数,然后在router的beforeEach方法中写入以下代码:
typeof to.meta.pageTitle !== undefined && setDocumentTitle(to.meta.pageTitle)

router的name属性是用来路由跳转的,不能随便利用。

/**
 * 兼容微信设置页面的title
 */
let setDocumentTitle = function (title) {
    document.title = title;
    let ua = navigator.userAgent;
    if (/\bMicroMessenger\/([\d\.]+)/.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
        var i = document.createElement('iframe');
        i.src = '/favicon.ico';
        i.style.display = 'none';
        i.onload = function () {
            setTimeout(function () {
                i.remove();
            }, 9);
        };
        document.body.appendChild(i);
    }
};

https://router.vuejs.org/zh-c...
路由meta属性配置:

let login = {
    path: '/login',
    name: 'login',
    component: (reslove) => require(['./views/login.vue'], reslove),
    meta: {
        pageTitle: '登录'
    }
};

回复

ycloud 作者 · 2016年12月05日

确实可以通过路由实现,但想尽量模拟原生title的效果,在html标签中实现更新,而不用每次都去更改js代码

回复

王静 · 2016年12月13日

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基础入门</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="../vue2.1.3.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        div {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div v-title>标题内容</div>
</body>
<script type="text/javascript">
    Vue.directive('title', {
        inserted: function(el, binding) {
            document.title = el.innerText
            el.remove()
        }
    })
</script>

</html>
这样怎么不对?页面标题没有更改啊?

回复

ycloud 作者 · 2016年12月13日

你的代码,没有启动vue
https://jsfiddle.net/5tpz210j/

回复

载入中...
ycloud ycloud

1.1k 声望

发布于专栏

ycloud

web前端

0 人关注