vue3 自定义网站title的hooks

在开发网页的时候会遇到,每个页面需要有自己的标题的需求,这样的话每个页面都需要写重复的代码。

通过hooks封装之后,页面上只需要一行代码就能搞定。

具体实现代码如下:

封装的title hooks

javascript 复制代码
import { ref,watchEffect,onUnmounted } from 'vue'

export function useTitle(title:string,restoreOnUnMount = true){
    const cTitle = document.title;
    const titleRef = ref(title);
    watchEffect(()=>{
        document.title = titleRef.vaule;
    })
    if(restoreOnUnMount){
        onUnmounted(() => {
            document.title = cTitle;
        })
    }
    const setTitle = (title:string) =>{
        titleRef.value = title;
    }
    return setTitle
}

在页面引入hooks,写下边代码

javascript 复制代码
const setTitle = useTitle('测试标题')
相关推荐
编程贝多芬1 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort3 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio5 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗8 分钟前
JS的对象属性存储器
前端
Lotzinfly9 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果10 分钟前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼14 分钟前
React中,useState和useReducer有什么区别
前端
普郎特24 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云34 分钟前
前端错误可观测最佳实践
前端
恋猫de小郭34 分钟前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter