Vue项目：App.vue无法获取路由名称，配置SEO标题遇阻

我明白你遇到的困扰了——想用vue-meta-info结合路由名称和统一模板来设置页面标题，但在根组件App.vue里没法正确获取路由相关变量。下面给你一步步的落地解决方案：

先确认基础配置 #

确保你已经在main.js里正确引入并注册了vue-meta-info，这是所有组件能使用它的前提：

// main.js
import Vue from 'vue';
import MetaInfo from 'vue-meta-info';
import App from './App';
import router from './router';

Vue.use(MetaInfo);

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

方案1：路由配置定义模板，App.vue动态渲染 #

这种方式灵活性更高，既可以给不同路由设置专属模板，也能统一用一套规则：

第一步：给路由添加meta标题模板

在router/index.js里，给每个路由的meta字段加上titleTemplate，用%s作为路由名称的占位符：

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        titleTemplate: '%s - 我的Vue项目' // 格式：路由名称 + 站点后缀
      }
    },
    // 示例：新增About路由
    {
      path: '/about',
      name: 'About',
      component: () => import('@/components/About'),
      meta: {
        titleTemplate: '%s - 我的Vue项目'
      }
    }
  ],
});

第二步：App.vue中动态生成标题

重点是用函数形式的metaInfo，这样才能访问到组件实例的this，进而获取$route的路由信息：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  // 函数形式的metaInfo才能拿到this.$route
  metaInfo() {
    // 拿到当前路由名称，无名称时用默认标题兜底
    const currentRouteName = this.$route.name || '首页';
    // 读取路由里的模板，没有则用默认模板
    const titleTemplate = this.$route.meta.titleTemplate || '%s - 我的网站';
    // 替换占位符生成最终标题
    const finalTitle = titleTemplate.replace('%s', currentRouteName);
    
    return {
      title: finalTitle
    };
  },
  // 监听路由切换，强制刷新meta信息
  watch: {
    '$route'() {
      this.$metaInfo.refresh();
    }
  }
};
</script>

为什么之前拿不到路由变量？ #

如果你之前用的是对象形式的metaInfo，那里面的this并不指向组件实例，自然无法获取$route。而函数形式的metaInfo会在组件实例化后执行，能正确访问到this上的路由实例。

额外优化：直接在路由里定义固定标题 #

如果不需要模板，也可以直接在路由的meta里写死标题，然后在App.vue里读取：

// router/index.js的路由配置
{
  path: '/about',
  name: 'About',
  component: () => import('@/components/About'),
  meta: {
    title: '关于我们 - 我的Vue项目'
  }
}

对应的App.vue的metaInfo可以改成：

metaInfo() {
  return {
    title: this.$route.meta.title || '首页 - 我的Vue项目'
  };
}

这样就能完美实现结合路由信息设置页面标题的需求啦！

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