动态改变vue项目页面的title

原创

人称左直拳 2022-08-15 10:23:48 博主文章分类：vue ©著作权

文章标签 vue.js vue项目title 配置文件属性值 javascript 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者人称左直拳的原创作品，请联系作者获取转载授权，否则将追究法律责任

其实也没啥，就是一句代码的事，只不过看在哪里执行而已。这句代码是：

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),
    };
  },
});