vue 动态增加路由

vue h5 项目接口请求路由数据，添加至项目

router.js

const routes = [{
	path: '/a',
	name: 'a',
	.......
}, {
	path: '/b',
	name: 'b',
	.......
}]


const router = new VueRouter({
    mode: "hash",
    routes,
});


router.beforeEach(async (to, from, next) => {
	// 路由拦截
})

export default router;
export {
	routes
}

1、使用addRoutes

router.beforeEach(async (to, from, next) => {
	router.addRoutes([{
	    path: '/c',
	    name: 'c',
	    ...
	}])
})

可以添加，但是刷新页面后c页面路由会丢失，需要做数据持久化

2、新建一个router

import router, {routes} from './router.js'
//发送请求
getRoutesData().then((res) => {
  const { code, data } = res;
  if (code === 200) {
    const newRoutes = routes
    newRoutes.push({
      path: `/c`,
      name: "ccc",
     ...
    });
    const newRouter = new VueRouter({
      mode: 'hash',
      routes: newRoutes
    })
    console.log(newRouter.matcher)
    router.matcher = newRouter.matcher


    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
  }
});