动态改变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的主要内容,如果未能解决你的问题,请参考以下文章

vue实现动态改变title

Vue:单页面应用动态设置title

vue路由跳转之当前页面路由跳转并动态改变页面的title

vue路由跳转之当前页面路由跳转并动态改变页面的title

vue动态修改header标题

页面变化时用 axios 和 vue 改变数据