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

Question

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

有没有办法在初始化后add/push到路由器的新路由？

这行不通：

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 }
})

Answer 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>

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

Answer 2

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

router.addRoutes(routes);

动态添加路由。

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

Answer 3

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

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.

上注入 return

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

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

vue-router 2, how to fetch routes via ajax?

vue.js

vue-resource

vue-router