vue2 动态路由实现方式

1. 安装 Vue Router

npm install vue-router@2

2. 配置 Vue Router

这通常在 src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
 
Vue.use(Router);
 
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});
 
export default router;

 3. main.js 引入

import router from '@/router/index'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4. 动态添加路由

要实现动态路由，你可以在应用启动时或者根据某些条件（如用户权限、API响应等）动态地向路由列表中添加路由。这可以通过修改 router.addRoutes 方法实现。

import axios from 'axios' // 假设使用 axios 进行 API 请求
import router from '@/router/index' // 引入 router 实例

// 模拟 API 请求，获取用户权限相关的路由配置
function fetchRoutes() {
    return axios.get('/api/user/routes').then(response => {
      const routes = response.data; 
      // response.data [{ path: '/user', name: 'user', view: 'User' }]
      return routes;
    });
}
// 在应用启动时动态添加路由
fetchRoutes().then((routes) => {
  routes.forEach(route => {
    route.component = (resolve) => require([`../views/${route.view}.vue`], resolve)
  })
  router.addRoutes(routes) // 动态添加路由配置到现有路由表中
})

如果在组件中可以直接用

this.$router.addRoutes([{ path: '/user', name: 'user', component: (resolve) => require(['../views/User.vue'], resolve) }]) 

引入这个 api 就可以跳转到 user 了

<router-link to="/user">Go to User</router-link>