vue-router 2，如何通过 ajax 获取路由？答案

【问题标题】：vue-router 2, how to fetch routes via ajax?vue-router 2，如何通过 ajax 获取路由？
【发布时间】：2017-04-01 07:06:43
【问题描述】：

如何在通过 ajax 获取路由数组后动态创建？

有没有办法在路由器初始化后向路由器添加/推送新路由？

这不起作用：

new Vue({
  el: '#app',
  template: '<App/>',
  data: {
    content: []
  },
  created: function () {
    this.$http.get('dummyjsondatafornow').then((response) => {

      // this doesn't work when creating the VueRouter() outside the Vue instance, as in the docs.
      // this.$router.options.routes.push({ path: '/about', component: About })

      let routes = [
        { path: '/about', component: About }
      ]

      // this doesn't work either
      this.router = new VueRouter({
        routes: routes
      })
    })
  },
  // router: router,
  components: { App }
})

【问题讨论】：

我可以理解为服务器端创建动态路由，但为 SPA 创建动态路由？重点在哪里？
好吧，SPA 的内容（包括页面/路由）是在与 SPA 不同的系统 (CMS) 中管理的。我还能如何解决这个问题？

标签： vue.js vue-resource vue-router

【解决方案1】：

我不相信没有。

也就是说，您可以使用通配符路线，以便为您提供替代方案。

我建立了一个网站，通过 CMS 控制后端（以及创建的页面），该 CMS 将所有页面作为 JSON 提供给 Vue。这意味着 Vue 不知道后端正在创建的路由。

相反，我们通过单个 * 通配符组件将所有 CMS 页面传递给 Vue Router。在 Vue Router 2 中，这看起来像：

const routes = [
  { path: '*', component: AllPages }
]

Vue 路由器 2 允许 Advanced Matching Patterns

这些允许您设置各种各样的条件，因此虽然您不能将通过 ajax 传回的对象注入到您的路由器中，但您可以将动态组件添加到与通配符匹配的 AllPages 组件中。这将允许您通过 ajax 请求传递要加载的组件的名称，然后在调用页面时加载该组件。即

您的 Ajax 响应：

{
  // url: component name
  '/about/': 'about',
  '/about/contact/': 'contact',
  ...
}

然后在一个 AllPages vue 组件中：

<template>
  <component v-bind:is="currentView"></component>
</template>

<script>

  module.exports = {
    data () {
      return {
        currentView: '',
        ajaxRoutes: {}, // loaded via ajax GET request
        ...
      }
    },
    // watch $route to detect page requests
    watch: {
      '$route' (to, from) {
        if (this.ajaxRoutes[to]) {
          this.currentView = this.ajaxRoutes[to]
        }
      }
    },
    ...
  }

</script>

以上是一个相当简略的想法，但本质上是您根据用户请求的路径动态加载组件。

【讨论】：

感谢您的详尽解答！这似乎是我正在寻找的。span>

【解决方案2】：

我认为这在 2.3.0 版中已修复。您现在可以运行

router.addRoutes(routes);

动态添加路由。

https://github.com/vuejs/vue-router/commit/0e0fac91ab9809254174d95c14592e8dc2e84d33

【讨论】：

【解决方案3】：

我有同样的情况，我的路由是在后端构建的，因为它是通过 CMS 维护的。这样，我就可以通过 API 调用检索我的路由，然后在 vue 路由器上返回它。这是我的看法：

routes.js

const router = store.dispatch('cms/fetchRoutes').then((response) => {
    const router = new VueRouter({
        routes: response,
        mode: 'history',
        ...
    });
    ...
    return router;
});

export default router;

main.js

import router from './router';
....
router.then((router) => {
    const app = new Vue({
        router,
        store,
        render: (h) => h(App),
    }).$mount('#app')
    ...
});

基本上我会调用 axios 来获取我的路由，然后将响应注入到 VueRouter 路由属性。然后在 main.js 上，再做一次，然后在Vue 上注入返回。

到那时，我的菜单现在正在从数据库中检索。不再有硬编码路径。

【讨论】：