Vue3.0+Ts实现动态路由

这是我参与更文挑战的第 1 天，活动详情查看更文挑战

最近公司的技术栈进行了调整，决定使用Vue3以及TypeScript开发后台管理，搭完项目后就开始搞动态路由，做一次总结，希望能给大家带来帮助！

后端返回结构如下：

后端返回的结构是权限列表以及菜单列表,前端根据权限列表跟本地还未载入的路由列表进行递归对比剔除。 权限列表中 /开头的是路由 _开头的是页面的元素是否可操作控制

新建路由剔除类

class filterRouteList {
    private auth: string[];
    constructor( options: string[] ) { 
        this.auth = options;
        this.init();
    }
    init() {
        
    }
}

export default filterRouteList;

登录成功后会调用这个类进行路由筛选auth接收权限列表;

if ( res.code === 0 ) {
    new filterRouteList( res.data.auth )
}

此时会执行init函数进行初始化调用TreeFilter函数进行筛选

init() {
    const routelist = TreeFilter( this.auth );
    this.renderRouter( routelist )
}
TreeFilter( arr: any ) {
    // auth 的格式是：['/home','/setting']
    let rep: any = [];
    arr.forEach( ( item: any ) => {
        if ( this.auth.indexOf( item.path ) != -1 ) {
            if ( item.children && item.children.length > 0  ) {
                item.children = this.TreeFilter( item.children );
            } 
            rep.push( item )
        }
    })
    return rep;
}

arr是本地配置的路由但还未写入路由。

• 遍历树状路由同时将每一项路由的path与权限列表对比，例如：'/home' === '/home',如果找得到并且还有子节点就进行递归，最后将剔除出来的路由写入rep，筛选后的路由如下：

接着调用renderRouter进行写入路由

renderRouter( route: object[] ) {
    route.forEach( ( item: any ) => {
        router.addRoute( 'gulp', {
            path: item.path,
            component: item.component,
            meta: item.meta,
            children: item.children
        })
    })
}

vue2是addRoutes但在vue3改成addRoute了，我们只需要遍历筛选过后的路由调用addRoute按照字段对应写入即可实现动态路由。

总结

以上就是本文的所有内容，如果你也碰巧正在搞这个需求，可以参考一二，希望这些经验能对你有所帮助！