一般我们做的管理系统,路由地址组件地址都是由后端传给我们的,所以一般都是动态生成路由

addRoute这个api 是增加一级路由的,如果想要增加二级路由一定要带上父路由地址

const routes = [{
	path: "/index",
	alias: '/',
	component: index,
}, 
]
//我们先定义父路由

动态路由一般都是保存在Vuex里面的

所以我们在Vuex 引入router

import router from "@/router/index.js"//引入
state: {
		routes:router.options.routes,//存储路由的地方
		
	},
mutations: {
		getRoutes(state,payload) {

//把ajax获取的路由数据 传进这里 如果格式不对 可以进行更改

		//下面我是用mock生成的数据,格式正确  
state.routes[0]//routes 是个数组来的,0是index主页,一般看定义的顺序
                 state.routes[0].children=[]	//定义子路由
				payload.forEach(item=>{

					state.routes[0].children.push(item)//把路由push到children数组
			
				})
			router.addRoute(state.routes[0]) 
//这里添加路由 注意没有[0]是会报错的因为增加路由一定要带有地址 routes 是个数组 所以会报错 索引值要与上方对应
		},

 

Logo

前往低代码交流专区

更多推荐