Vue3中如何在路由标签的pageTitle中使用动态变量？

直接在路由配置的meta里写route.params.slug行不通——因为路由定义是静态的，编写时还不存在当前路由实例。以下是三种可行的实现方式：

方法一：在面包屑组件内动态渲染标题 #

无需修改路由配置，直接在组件中根据路由参数替换固定标题：

面包屑组件代码示例 #

<template>
  <v-breadcrumbs>
    <v-breadcrumbs-item
      v-for="(item, index) in $route.meta.breadcrumb"
      :key="index"
      :to="item.to"
      :disabled="item.disabled"
    >
      <!-- 针对需要动态替换的标题，判断后使用路由参数 -->
      {{ item.title === 'View' ? $route.params.slug : item.title }}
    </v-breadcrumbs-item>
  </v-breadcrumbs>
</template>

<script setup>
import { useRoute, computed } from 'vue-router'
const route = useRoute()

// 页面标题通过计算属性动态获取
const pageTitle = computed(() => route.params.slug || route.meta.pageTitle)
</script>

路由配置保持原结构，meta里的pageTitle和面包屑title可留作默认值。

方法二：通过导航守卫动态修改路由元信息 #

在路由全局守卫中，根据当前路由参数动态覆盖meta里的固定值：

路由配置文件（router/index.js）示例 #

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    name: "educations-view-id-tab",
    path: "/educations/view/:slug", // 确保路由定义包含slug参数
    component: () => import('../views/EducationView.vue'),
    meta: {
      pageTitle: 'Educations', // 默认值
      breadcrumb: [
        {
          title: 'List',
          to: { name: 'educations' },
          disabled: false
        },
        {
          title: 'View', // 默认值，后续会被替换
          disabled: true
        },
      ]
    }
  },
  // 其他路由...
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 全局前置守卫，动态修改meta内容
router.beforeEach((to, from, next) => {
  if (to.params.slug) {
    // 动态设置页面标题
    to.meta.pageTitle = to.params.slug
    // 动态修改面包屑中的标题
    if (to.meta.breadcrumb) {
      to.meta.breadcrumb = to.meta.breadcrumb.map(item => {
        if (item.title === 'View') {
          return { ...item, title: to.params.slug }
        }
        return item
      })
    }
  }
  next()
})

export default router

之后在组件中直接使用$route.meta.pageTitle和$route.meta.breadcrumb即可，已是动态更新后的值。

方法三：在路由meta中定义函数，组件内调用执行 #

这种方式让路由配置更灵活，支持自定义逻辑：

路由配置示例 #

const routes = [
  {
    name: "educations-view-id-tab",
    path: "/educations/view/:slug",
    component: () => import('../views/EducationView.vue'),
    meta: {
      // 定义函数接收route参数，返回动态标题
      pageTitle: (route) => route.params.slug,
      breadcrumb: [
        {
          title: 'List',
          to: { name: 'educations' },
          disabled: false
        },
        {
          title: (route) => route.params.slug, // 面包屑标题也用函数
          disabled: true
        },
      ]
    }
  }
]

面包屑组件中调用函数 #

<template>
  <v-breadcrumbs>
    <v-breadcrumbs-item
      v-for="(item, index) in breadcrumbItems"
      :key="index"
      :to="item.to"
      :disabled="item.disabled"
    >
      {{ item.title }}
    </v-breadcrumbs-item>
  </v-breadcrumbs>
</template>

<script setup>
import { useRoute, computed } from 'vue-router'
const route = useRoute()

// 处理面包屑项，执行函数获取动态标题
const breadcrumbItems = computed(() => {
  return route.meta.breadcrumb.map(item => {
    return {
      ...item,
      title: typeof item.title === 'function' ? item.title(route) : item.title
    }
  })
})

// 处理页面标题
const pageTitle = computed(() => {
  const title = route.meta.pageTitle
  return typeof title === 'function' ? title(route) : title
})
</script>

内容的提问来源于stack exchange，提问作者javad