如何更新 vue-router

Posted 2023-02-23

【中文标题】如何更新 vue-router

【英文标题】：How to update vue-router

【发布时间】：2019-03-28 20:10:39

【问题描述】：

我是 vuejs 的新手，我使用 vue cli 3。我有一个包含不同组件的项目。我有一个菜单组件，我从一个 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: [ ]
    
  ]

谢谢。

【参考方案1】：

你需要导入 vue 路由器。您可以选择在创建新项目时导入 vue router，也可以稍后通过将 vue router 添加到项目中来选择导入。

完成此操作后，您需要定义路线。请点击此链接 - https://scotch.io/tutorials/getting-started-with-vue-router。

基本上，如果您在创建新项目时包含路由器选项，则大部分工作都由 cli 为您完成。

【讨论】：

谢谢，但这不是我需要的。我的代码与本文建议的代码完全相同。我的问题是我无法自动填充 route[] 数组。在我的代码中，我使用硬编码值，例如“页面、产品、新闻……”

【参考方案2】：

嗯，我刚刚使用了这条路线

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

【参考方案3】：

要动态添加路由到现有路由器，您可以使用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)

【讨论】：

我看了你的问题，你可以在创建路由器后通过addRoutes的方法添加路由。在我的示例中，我硬编码了其他路线，但您可以从 api 获取它们

你能添加一个有效的例子吗？因为我尝试与addRoutes 合作但没有成功。我的问题是我想添加作为 API 响应的路由（所以我不知道我有多少路由，并且每次调用 API 时路由都会改变。在我的问题中，我只是提供了一个示例响应，以及路由数组应该是什么样子）

我的第一次更新是一个工作示例，我只是通过在 5 秒后返回一个承诺来模拟网络来伪造数据，但继续的方式是相同的。您所要做的就是解析您的 JSON：请参阅我的第二次更新