若依项目--修改标题

200 阅读1分钟
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default  {
  name:  'App',
    metaInfo() {
        return {
            title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
            titleTemplate: title => {
                return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
            }
        }
    }
}
</script>

这段代码是一个 Vue.js 组件,是应用的根组件。下面是对代码的解释:

  1. <template> 区域:

    • <div id="app">: 在 HTML 中定义一个带有 id 为 "app" 的 <div> 元素,这通常是整个 Vue.js 应用的挂载点。
    • <router-view />: 这是 Vue Router 提供的用于显示当前路由组件的占位符。在这个 div 内部,通过 <router-view /> 渲染当前路由对应的组件。
  2. <script> 区域:

    • export default: 导出默认的对象,通常是 Vue.js 组件对象。

    • name: 'App': 组件的名称,命名为 "App"。

    • metaInfo() { ... }: 这是一个使用了 vue-meta 插件提供的功能,用于动态设置页面的元信息(例如标题)。

      • title: 设置页面的标题,根据 Vuex 中的 settings 状态来动态生成。如果 dynamicTitle 为 true,则使用 settings.title 作为页面标题,否则使用默认的标题。
      • titleTemplate: 定义一个标题模板,用于将页面标题与应用标题组合在一起。如果有页面标题,则显示 "页面标题 - 应用标题",否则只显示应用标题。

这个组件的主要作用是作为根组件,承载整个应用的结构,并使用 Vue Router 来渲染不同路由对应的组件。同时,它利用 vue-meta 插件来动态管理页面的元信息。

image.png 上面这个地方的标题修改则是找到logo.vue文件

image.png

保存修改后的代码前端重新运行之后就可以看到修改之后的标题