如何在Vue Router定义文件中使用URL参数动态设置页面标题

你在路由配置里直接用$route.params是行不通的——因为路由配置是在Vue Router初始化阶段定义的，此时$route实例还没创建，根本拿不到参数值。而且路由的name字段必须是固定字符串，它是路由的唯一标识，不能设成动态值。

下面是两种可行的实现方案：

方案一：全局导航守卫统一处理 #

通过全局前置守卫，在每次路由跳转时根据当前路由的参数动态生成标题，适合全局统一管理页面标题。

调整路由配置 #

先把路由的name改成固定值，meta可按需设置标题模板：

const routes = [
  {
    path: '/rooms/:room/:id?',
    name: 'RoomsView', // 固定名称，用于路由跳转标识
    component: RoomsView,
    meta: {
      titleTemplate: '%s - WebsiteName' // 可选，标题模板
    }
  }
]

添加全局导航守卫 #

创建路由实例后，添加beforeEach守卫处理标题：

const router = createRouter({
  // 你的路由模式（如history）和其他基础配置
  routes
})

router.beforeEach((to, from, next) => {
  // 收集参数拼接标题内容
  const titleSegments = []
  if (to.params.room) titleSegments.push(to.params.room)
  if (to.params.id) titleSegments.push(to.params.id)
  
  // 生成并设置最终页面标题
  const pageTitle = titleSegments.join(' ')
  document.title = pageTitle ? `${pageTitle} - WebsiteName` : 'WebsiteName'
  
  next() // 必须调用next()继续路由跳转流程
})

方案二：组件内单独处理 #

如果只是个别页面需要动态标题，可以在组件内部监听路由参数变化来设置，适合页面个性化需求。

在RoomsView组件中：

<script setup>
import { useRoute, onMounted, watch } from 'vue'

const route = useRoute()

// 封装设置标题的函数
const setPageTitle = () => {
  const { room, id } = route.params
  let title = room
  if (id) title += ` ${id}`
  document.title = `${title} - WebsiteName`
}

// 组件挂载时初始化标题
onMounted(setPageTitle)

// 监听路由参数变化，同路由不同参数时更新标题
watch(
  () => [route.params.room, route.params.id],
  setPageTitle,
  { deep: true }
)
</script>

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