如何更新vue-router

Question

我是vuejs的新手，我使用vue cli3。我有一個包含不同組件的項目。 我有一個菜單組件，在這里我可以從一個api（代碼波紋管）中獲取所有菜單項。 我已經安裝了vue-router來進行路由，但是我的問題是我不知道如何在路由器對象內部填充路由數組。 我進行了很多搜索，但沒有任何幫助。

因此，基本上，而不是使用經過編碼的路徑和組件來填充路由。我想自動使用從api中獲取的項目來填充它。

 <template> <div class="Menu"> <nav class="navbar navbar-default navbar-custom"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-right" v-for="menu in main_menu" v-bind:key="menu.menu_item"> <router-link class="dropdown-toggle" data-toggle="dropdown" :to="menu.menu_url"></router-link> <li><router-link :to="menu.menu_url">{{ menu.menu_item }}</router-link> <ul class="dropdown-menu" v-for="list in menu.list_item" v-bind:key="list.url"> <li><router-link v-bind:to="list.menu_url">{{ list.title }}</router-link></li> </ul> </li> </ul> </div> </div> </nav> <router-view></router-view> </div> </template> <script> import axios from 'axios'; export default { name: 'Menu', data () { return { main_menu: null, error:"" } }, mounted () { //console.log(this.page); axios({ method: "GET", "url": "http://apiurl" }).then(result => { this.main_menu = result.data.main_menu; }, error => { this.error = error; }); } } } </script> 

router.js是：

 import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) var route = [ { path: '/home', name: 'Home', component: Home }, { path: '/awards', name: 'Awards', component: () => import('./views/Awards.vue') }, { path: '/news', name: 'News', component: () => import('./views/News.vue') }, { path: '/product', name: 'Product', component: () => import( './views/Product.vue') }, { path: '/page', name: 'Page', component: () => import('./views/Page.vue') } ]; export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: route }) 

我從api得到的json：

main_menu: [
    {
      menu_item: "Home",
      menu_url: "/home",
      list_item: [ ]
    },
    {
      menu_item: "Awards",
      menu_url: "/awards",
      list_item: [ ]
    },
    {
      menu_item: "Product",
      menu_url: "product",
      list_item: [
        {
          url: "/product/sticker",
          title: "sticker"
        },
        {
          url: "/product/cup",
          title: "Promotion Cup"
        }
      ]
    },
    {
      menu_item: "News",
      menu_url: "/news",
      list_item: [ ]
    },
    {
      menu_item: "Page",
      menu_url: "/page",
      list_item: [ ]
    }
  ]

謝謝。

Answer 1

您需要導入vue路由器。 您可以在創建新項目時選擇導入vue路由器，也可以稍后通過將vue路由器添加到項目中來選擇導入。

完成后，您需要定義路線。 請點擊此鏈接-https: //scotch.io/tutorials/getting-started-with-vue-router 。

基本上，如果在創建新項目時包括路由器選項，那么cli會為您完成大部分工作。

Answer 2

要動態添加到現有路由器的路由，可以使用router.addRoutes([])如下：

router.js：

Vue.use(Router)

// define your static routes
var route = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
];

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: route
})

其他任何地方

import router from '@/router'

router.addRoutes([{
    path: '/awards',
    name: 'Awards',
    component: () => import('./views/Awards.vue')
  },
  {
    path: '/news',
    name: 'News',
    component: () => import('./views/News.vue')
  },
  {
    path: '/product',
    name: 'Product',
    component: () => import( './views/Product.vue')
  },
  {
    path: '/page',
    name: 'Page',
    component: () => import('./views/Page.vue')
  }
])
router.push('/page')

更新：另一個承諾的例子

import router from '@/router'

const getRoutesFromApi = () => {
  return new Promise((resolve, reject) => {
    const data = [
      {
        path: '/awards',
        name: 'Awards',
        component: () => import('./views/Awards.vue')
      },
      {
        path: '/news',
        name: 'News',
        component: () => import('./views/News.vue')
      },
      {
        path: '/product',
        name: 'Product',
        component: () => import( './views/Product.vue')
      },
      {
        path: '/page',
        name: 'Page',
        component: () => import('./views/Page.vue')
      }
    ]
    setTimeout(resolve(data), 5000)
  })
}

getRoutesFromApi().then(response => router.addRoutes(response))

更新2：更具體的例子

import router from '@/router'
import axios from 'axios'

axios.get('http://your-api/whatever').then(response => {
    // response contains your data as json, you have to fetch them to get vuejs route-like object
    const routes = JSON.parse(response.data).map(o => {
        // here you have to transform your data in vuejs route item for example
        return {
            path: o.menu_url
            name: o.menu_item + 'View'
            component: () => import('./views/' + o.menu_item + '.vue')
        }
    })
    router.addRoutes(routes)
}

Answer 3

好吧，我只是用這條路線

var route = [
  {
    path: '/*',
    name: 'all',
    component: () => import('./component/All.vue')
  }
];