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('测试标题')
相关推荐
comelong3 分钟前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹5 分钟前
硬件产品研发管理工具实战指南
前端·python
用户3802258598245 分钟前
vue3源码解析:依赖收集
前端·vue.js
用户7579419949705 分钟前
基于JavaScript的简易Git
javascript
WaiterL6 分钟前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason8 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕7789 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽28 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟28 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦29 分钟前
前端列表页大数据内存优化的思考
前端·面试