Javascript 如何在Vue路由器或组件中使用Axios设置页面元（标题、说明、og）

我的vue路由器

const routes = [
  {
    path: '/',
    component: App,
    meta: {
      title: 'Home Page - Example App',
      metaTags: [
        {
          name: 'description',
          content: 'The home page of our example app.'
        },
        {
          property: 'og:image',
          content: ''
        }
      ]
    }
  },
  {
    path: '/about',
    // I'm kind of cheating by reusing the main app component here.
    component: App,
    meta: {
      title: 'About Page - Example App',
      metaTags: [
        {
          name: 'description',
          content: 'The about page of our example app.'
        },
        {
          property: 'og:image',
          content: ''
        }
      ]
    }
    ...

我的Json

{
  "home": {
    "title": "Home Page Title",
    "description": "Home Page Desc",
    "og-image": ""
  },
  "about": {
    "title": "About",
    "description": "About Page Desc",
    "og-image": ""
  },
  ...
}

如何使用公共托管相同vue的json文件设置标题 目录（public/json/meta.json）

设置meta、vue路由器或组件的好方法是哪一种

我是vue.js的新手，所以请告诉我详细的方法，以便我能够轻松理解清楚的步骤