Question

如何通过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 }
})

Answer 1

我不相信没有。

那就是说你可以在路线上加上通配符，这样可以为你提供另一种选择。

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

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

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

Vue Router 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路由器上将其返回。这是我的看法：

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。

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

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

3 个答案: