记录vue中后端控制路由实现与遇到的问题

步骤

1. 判断store中是否有路由
2. 没有路由请求路由，
3. 处理component，引入
4. 添加到初始路由，（通常是/）
5. 同步到store中

1、判断store中是否有路由

const menuStore = useMenuStore()
if (menuStore.menuList.length===0){
    await initBackEndControlRouter()
    // to.query 防止页面刷新时，普通路由带参数时，参数丢失。动态路由（xxx/:id/:name"）isDynamic 无需处理
    next({ path: to.path, query: to.query });
}else{
    next()
}

2、没有路由请求路由

//请求出的路由结构
{
    "path": "/home",
    "name": "home",
    "component": "home/index",
    "meta": {
        "title": "首页",
    }
}

3、处理component，引入

//修改路由中的component，
export function backEndComponent(routes) {
    return routes.map(r => {
        if (r.component) {
            r.component = importComponent(r.component)
        }
        r.children && backEndComponent(r.children)
        return r
    })
}

export function importComponent(component) {
//require引入的方式不知为什么不能用
    // return require(`@/views/${component}.vue`)
    return import(`@/views/${component}`)
}

4、添加到初始路由

使用vue-router的addroute

componentRes.forEach(route =>{
    router.addRoute('/',route)
})

5、添加都store

完整代码

import {getMenuList} from "@/api/menu";
import {router} from "@/router/index"
import {useMenuStore} from "@/store/menuStore";

//请求后端地址
export async function initBackEndControlRouter() {
    const res = await getMenuList()
    const componentRes = backEndComponent(res)
    const menuStore = useMenuStore()
    menuStore.setMenuList(componentRes)
    componentRes.forEach(route =>{
        router.addRoute('/',route)
    })
}

//修改路由中的component，
export function backEndComponent(routes) {
    return routes.map(r => {
        if (r.component) {
            r.component = importComponent(r.component)
        }
        r.children && backEndComponent(r.children)
        return r
    })
}

export function importComponent(component) {
    // return require(`@/views/${component}.vue`)
    return import(`@/views/${component}`)
}

initBackEndControlRouter()调用在路由的beforeEach中