动态改变vue项目页面的title
Posted 左直拳
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态改变vue项目页面的title相关的知识,希望对你有一定的参考价值。
其实也没啥,就是一句代码的事,只不过看在哪里执行而已。这句代码是:
document.title = "新题目";
一、动态改变vue项目页面的title
vue只是一个前端框架,有自己的一些语法,但归根到底,还是要编译成原生的javascript代码才能被浏览器执行。同时,原生的javascript代码,它还是认的。不过,这些代码要放在合适的位置。完整例子如下。
这个例子中,页面的title,跟随从服务器端返回的数据而动态变化。title的结构为“当前展示信息的名称 - 网站名称”。
<script>
import defineComponent, reactive, toRefs, onMounted, watch from "vue";
const appConfig = require("/public/config");
export default defineComponent(
props: fId: default: 0 ,
setup(props)
const folderInfo = reactive(
fd:
logo: "",
category: "",
name: "",
org: "",
note: "",
seaarea: "",
fileNum: "",
,
);
onMounted(async () => //页面加载即执行
search(props.fId);
);
watch(//监控属性值。属性值变化即重新获取数据,title于是随之变化
() => props.fId,
(val) =>
search(val);
);
const search = (fId) =>
folder
.getDetail(fId)
.then((res) =>
const fd = res.data;
folderInfo.fd = fd;
//关键的一句
//appConfig.app.name,是配置文件中定义的网站名称,如“订餐谁拿饭抓阄规划监督管理评估系统”
document.title =
`$fd.name[$tools.getDataTime(fd)] - ` + + appConfig.app.name;
)
.catch((err) =>
console.log(err);
);
;
return
...toRefs(folderInfo),
;
,
);
二、页面title从配置文件中读取
上面说到,网站名称作为页面title的一部分,是从配置文件中定义的。这个机制是咋样的呢?
vue这类框架,搞出来的项目,都是单页面项目。就是说,别看这个项目好像挺大,但只有一个页面,运行过程中,所有的“页面”都是通过JS脚本动态切换和加载的。这种情况下,将title直接写到public/index.html里,当然也是可以的。
但是,title通常写的都是系统名称,而系统名称在一个项目里,至少有三个地方要用到:页面title,登录页面,登录后页面的页头。作为程序员,很自然就想到,应当将这个系统名称写到配置文件里,这三个地方都从配置文件里读。
具体机制可看这里
vue项目读取全局配置
以上是关于动态改变vue项目页面的title的主要内容,如果未能解决你的问题,请参考以下文章