Vue.js Vue应用程序中应在何处加载路由元数据？

我正在建立一个VueJs水疗中心。我正在使用vue路由器，并试图找到以下问题的最佳解决方案。我有一系列的路线。每一个都需要调用一个API来获取给定ID的元数据

/industry/:id/overview
/industry/:id/top-stories
/industry/:id/top-tweets
/brand/:id/overview
/brand/:id/top-stories
/brand/:id/top-tweets

我一直在考虑使用created或beforeRouteEnter/beforeRouteUpdate，我有点迷茫。理想情况下，我只会在到达新的/industry/：id时获取新数据，而不是在同一id内的页面之间导航时获取新数据。此外，我希望避免必须定义获取来获取每个页面组件中的数据。我也不想把这件事复杂化，所以我的问题是，有没有解决这个问题的标准方法

澄清：

---

当我在这里说meta时，我指的是从API返回的关于给定行业或品牌的数据，我使用路由中的ID提取这些数据。api调用包括我希望在页面呈现给用户后立即在页面上显示的行业/品牌名称

我也有类似的想法。我采用以下方法解决这一问题：

我对所有/industry/：id Vue都使用相同的组件。如果两条路线（例如/industry/：id/overview和/industry/：id/top stories）使用相同的组件，那么Vue将保持不变

然而，改变的是路线。因此，如果您向route对象中的meta对象添加一个page键，并可能添加一个名为page的计算属性，该属性返回$route.meta.page，则可以使用v-if属性有条件地呈现任何组件。所以你可能会有

这允许您在创建或装载的生命周期中从API获取所有数据，并将其存储为状态。由于管线更改不会重新加载零部件，因此状态保持不变

下面是一个代码示例

// router.js

const Project = () =>
import(/* webpackChunkName: "projects" */ "./views/projects/_id");

export default new Router({
mode: "history",
routes: [
{
    path: "/projects/:project_id/views",
    name: "ViewProject",
    component: Project,
    meta: {
        page: "views",
    }
  },
  {
    path: "/projects/:project_id/export",
    name: "ExportProject",
    component: Project,
    meta: {
        page: "exports"
    }
  },
  {
    path: "/projects/:project_id/recommendations",
    name: "ProjectRecommendations",
    component: Project,
    meta: {
        page: "recommendations"
    }
  },
]
});

这是模板

<template>
    <div v-if="project">
        <h1>{{ project.name }}</h1>
        <router-link :to="/project/someid/views">Views</router-link>
        <router-link :to="/project/someid/exports">Exports</router-link>
        <router-link :to="/project/someid/recommendations">Recommendations</router-link>
        <ul v-if="page==='views">
            <li v-for="(view, i) in project.views" :key="i">{{ views }}</div>
        </ul>
        <ul v-else-if="page==='exports">
            <li v-for="(export, i) in project.exports" :key="i">{{ export }}</div>
        </ul>
        <ul v-else-if="page==='recommendations">
            <li v-for="(recommendation, i) in project.recommendations" :key="i">{{ recommendation }}</div>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            project: null
        }
    },
    computed: {
        page() {
            return this.$route.meta.page;
        }
    },
    mounted() {
        this.getProject()
    },
    methods: {
        getProject() {
            axios
                .get(`/projects/someid`)
                .then(res => this.project = res.data)
        }
    }
}
</script>

---

虽然路线没有像您所说的那样改变，但是仍然会调用，因此您可以通过这种方式对路线改变进行一些处理。