如何使用vue-router，实现动态匹配路由？

Question

问题描述

需求：
通过api接口得到数据，再根据得到的数据动态渲染的路由
可以提供个什么思路吗？或者一个简单的案例？

Answer 1

这里给你写一个基本的动态路由，当然实际业务肯定需要封装并用到VueRouter的其他比如导航守卫等相关API。内容太多我也一时半会讲不完，不过大概思路一致。

@/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/view/home/index'
import About from '@/view/about/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import router from '@/router'

  export default {
    name: 'App',
    created() {
      //从服务端获取的数据
      let data = [{
        path: '/stats',
        name: 'Stats',
        component: () => import('@/view/stats/index')
      }]
      //添加动态路由,若不添加,则无法进入对应路由。
      //相关功能的显示与否，根据data进行判断。
      router.addRoutes(data)
    }
  }
</script>

Answer 2

使用 router 的 .addRoutes() 方法，参考：https://router.vuejs.org/api/...