How to make dynamic routes on the vue router?
My MainNavBar component like this :
...
-
I suppose
getDetailMenuis calling API method to getlistMenu. You can create route dynamically using addRoutes methodPseudo code
created() { this.getDetailMenu(this.$route.path) .then((listMenu) => { // you need to return listMenu from getDetailMenu listMenu.forEach((item, index) => createAndAppendRoute(item, index)) }) }, methods: { createAndAppendRoute: (item, index) => { console.log(item, index) // Base on your data, you should be able to create router name and path from item and index // here is just an example let newRoute = { path: `/${item}`, name: `${item}_${index}`, components: { default: Application, header: MainNavbar }, } this.$router.addRoutes([newRoute]) } }讨论(0) -
This link should help : https://router.vuejs.org/guide/essentials/navigation.html
goTo(key) { this.$router.push({ path: key }); }讨论(0) -
you can use the router.addRoutes method (https://router.vuejs.org/api/#router-addroutes):
router.addRoutes(routes: Array<RouteConfig>)Dynamically add more routes to the router. The argument must be an Array using the same route config format with the routes constructor option.
讨论(0)
加载中...
- 热议问题