基于Vue实现标题/背景等任意内容的动态切换

[ChenJiaH]

首发于微信公众号《前端成长记》，写于 2018.01.26

背景

目前项目中，使用 Vue 开发的一般都是SPA项目，而非多页面项目，所以页面标题就需要自己根据每个不同的路由进行对应的设置了。

阅读此文前，您需要对以下内容有所了解：

• Vue 指令

解决方案

• 每个页面都手动设置 document.title = XXX
• 采用 Vue 指令 的方式实现

这里推荐使用 Vue 指令 的方式。

核心代码

指令一般有以下几个钩子函数

export default {
    // 绑定钩子函数
    bind (el, binding, vnode) {},
    // 插入时
    inserted (el, binding, vnode) {
        // el 是绑定的DOM对象，可以选择自己设置dataset，也可以选择直接绑定在binding
        // 通过取dataset
        document.title = el.dataset.title;
        // 这里也可以同时进行其他操作，比如换背景，换其他任意你想更换的东西
        el.dataset.bg && (document.body.className = el.dataset.bg);
    },
    // 组件VNode更新时
    update (el, binding, vnode, oldVnode) {
        // el 是绑定的DOM对象，可以选择自己设置dataset，也可以选择直接绑定在binding
        // 通过绑定在binding
        document.title = binding.expression;  // 字符串形式用 expression；变量形式用 value
        // 这里也可以同时进行其他操作，比如换背景，换其他任意你想更换的东西
        el.dataset.bg && (document.body.className = el.dataset.bg);
    },
    // 组件更新时
    componentUpdated (el, binding, vnode, oldVnode) {},
    // 指定与元素解绑时
    unbind (el, binding, vnode) {}
}

<template>
    // 通过dataset设置
    <div v-title data-title="我是标题"></div>
    // 通过binding设置
    <div v-title="我是标题"></div>
</template>

结尾

Vue 指令这种形式，希望不要仅用于此，因为能够拓展延伸到什么程度，完全取决于您的想象力。

（完）

---

本文为原创文章，可能会更新知识点及修正错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验
如果能给您带去些许帮助，欢迎 ⭐️star 或 ✏️ fork
(转载请注明出处：https://chenjiahao.xyz)