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

Posted 2023-02-22

【中文标题】vue-router 2，如何通过 ajax 获取路由？

【英文标题】：vue-router 2, how to fetch routes via 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) 中管理的。我还能如何解决这个问题？

【参考方案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 上注入返回。

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