Vue Router Meta标题传递参数报错，请求解决方案

我之前也踩过一模一样的坑！核心原因是路由配置对象在初始化的时候，$route实例还没创建，所以你直接在meta里写$route.params.id肯定会报未定义的错，而且:id只是路由路径的占位符，不是实际的参数值，直接拼接也没用。下面给你几个亲测有效的解决方案：

方案1：让meta.title成为一个函数（最推荐） #

把meta里的title改成接收route参数的函数，然后在你的VueHeader组件里执行这个函数拿到动态标题：

路由配置修改： #

{ 
  path: '/case/:id', 
  name: 'edit-case', 
  component: VueEditCase, 
  meta: { 
    // 定义成函数，接收当前route作为参数
    title: (route) => `Edit case ${route.params.id}` 
  }, 
}

VueHeader组件修改： #

在组件里计算标题的时候，判断如果是函数就传入当前route执行：

// VueHeader组件的计算属性
computed: {
  pageTitle() {
    const currentRoute = this.$route
    // 如果meta.title是函数，就调用它并传入route
    if (typeof currentRoute.meta.title === 'function') {
      return currentRoute.meta.title(currentRoute)
    }
    // 其他路由的静态标题直接返回
    return currentRoute.meta.title || '默认页面标题'
  }
}

这样不管路由参数怎么变，header都会自动渲染最新的标题。

方案2：用全局路由守卫动态设置标题 #

在路由的全局前置守卫里，根据当前路由的信息动态设置标题，同时可以同步更新页面的document.title（对SEO也友好）：

// router/index.js
router.beforeEach((to, from, next) => {
  let pageTitle = ''
  if (to.name === 'edit-case') {
    // 拿到动态参数拼接标题
    pageTitle = `Edit case ${to.params.id}`
  } else {
    // 其他路由用静态meta标题
    pageTitle = to.meta.title || '默认标题'
  }
  // 设置浏览器标签标题
  document.title = pageTitle
  // 如果你的VueHeader是通过Vuex或者props接收标题的，这里同步更新
  // 比如用Vuex的话：store.commit('UPDATE_PAGE_TITLE', pageTitle)
  next()
})

然后你的VueHeader组件可以直接读取document.title，或者从Vuex里获取标题值。

方案3：在组件内动态修改meta标题 #

如果只需要在单个组件里处理，也可以在VueEditCase组件的生命周期钩子或者watch里修改meta的标题：

// VueEditCase组件
export default {
  created() {
    // 初始化时设置标题
    this.$route.meta.title = `Edit case ${this.$route.params.id}`
  },
  watch: {
    // 监听路由参数变化，更新标题
    '$route'(to) {
      this.$route.meta.title = `Edit case ${to.params.id}`
    }
  }
}

这种方法需要确保你的VueHeader组件是监听$route变化来更新标题的，否则可能不会自动刷新。

为什么之前的写法不行？ #

再给你梳理下原因：

• 路由配置是在Vue实例创建之前就定义的，这时候$route、this这些实例对象都还不存在，直接引用肯定会报错。
• :id只是路由路径的占位符字符串，不是实际的参数值，所以直接拼接只会显示成Edit case :id，不是真实的ID。

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