Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏)

14,518 阅读3分钟

动态路由是一个常用的功能,根据后台返回的路由json表,前端动态显示可跳转的路由项,下面来讲解一下具体的实现方式:

大致业务需求:前端在login登陆页,输入账号密码后,点击登陆,接口返回登陆成功的同时,也会把该用户可操作的路由链表返回给前端(JSON数组格式),前端拿到这个JSON数组,来渲染成侧边栏列表(说的是PC端),我们需要将所有的页面都写好,然后去匹配后台返回的部分路由来进行展示(比如项目一共有100个页面,后台返回了10个路由地址,那么我们只展示返回的对应的10个即可)

说一下思路:

我们可以将路由分为3个部分

1.默认展示的部分(包括login页面、404页面等等)

2.后台返回的部分(具有权限操作的部分路由)

3.全部动态路由(比如后台返回了10个路由地址,我们全部动态的路由是100个地址,所做的就是将100个全部动态路由里面和后台返回的对应匹配的10个路由追加到默认路由里面,就可以完成动态路由的流程了)

正常路由,我们的写法大概是这样的:

//src/router/index.js
import Router from 'vue-router'
Vue.use(Router)
const Routes = [
    {
        path:'/',
        component:Login,
        meta: {
            title: '登录页'
        }
    },
    {
        path:'/Home',
        component:Home,
        meta: {
            title: 'Home主页'
        }
    }
]
const Routers = new Router({
    routes: Routes
})
export default Routers;
    

我们要做动态路由,就需要改变一下这个结构(分为动态+静态),这里的静态是指需要匹配展示对应的,所以,我们需要在建一个全部的路由JSON

//stc/router/index.js
const defaultRoutes = [
//...这默认路由就是上面代码内的登录页/404页面...
]
const allRouters = [//这里就是全部动态路由
    {
        path:'/UserList',
        component:UserList,
        meta: {
            title: '人员管理'
        }
    },
    {
        path:'/PwdList',
        component:PwdList,
        meta: {
            title: '密码管理'
        }
    }
]
const Routers = new Router({
    routes: defaultRoutes//默认渲染 -> 默认路由
})
export default Routers;
    

所有的静态路由和动态路由,都写完了,接下来就是关键部分(将后台返回的路由json拼接到route内),由于我们是在login页面点击登陆后,进行的跳转,所以,把代码写到路由钩子内(Routers.beforeach函数)

Routers.beforeEach((to,from,next) => {
    if(to.path != '/' && !store.state.isLogin) {
        //跳转的不是首页 同时 用户还未登陆
        //这个判断,我们就可以基本判定用户是在做登陆时候的跳转
        //↓拿到登陆时,接口返回的路由数组(vuex内),大致是这样的
        let resRouterArr = [            {                routeName: '人员管理',                children: [                    {                        routeName: '销售管理',                        ...                    },                    {                        routeName: '内勤管理',                        ...                    }                ]
            }
        ]
        let routerArr = []
        resRouterArr.forEach(item => {
            allRouters.forEach(all => {
                if(item.routeName == all.routeName) {
                    //拿到本地路由对象
                    let obj = JSON.parse(JSON.stringify(all))
                    let childrenRouter = []
                    if(item.children && item.children.length > 0) {
                        item.children.forEach(childItem => {
                            all.children.forEach(allItem => {
                                if(childItem.routeName == allItem.routerName) {
                                    childrenRouter.push(allItem)
                                }
                            })
                        })
                        obj.children = childrenRouter
                    }
                    routerArr.push(obj)
                }
            })
        })
        Routers.addroutes(routerArr)//addroutes为添加路由数组的方法
        store.commit('domRouteTree',rousterArr)//存储进vuex,之后页面左右路由列表渲染使用
        next({...to,replace:true})//进行路由跳转
    } else {
        next()
    }
})
    

这样,我们跳转到之后的业务页面,就可以看到列表左侧生成的动态路由列表了,点击左侧的几个动态生成的路由,也很nice,么得问题~

ps:这里遇到了一个坑,踩了一会儿,也记上

以前都是这样写的

import UserList from '@/views/User/UserList'
    

但是跳转过去之后,页面就会出现白屏报错的情况,查了半天,原来要补齐路径

import UserList from '@/views/User/UserList.vue'
    

解决完,还特意试了一下,加上【.vue】就没问题,去掉【.vue】就白屏+报错,真是坑了~,后来听【@米西】同学说:要加.vue是因为你的user目录下对应的不是index,嗯,这样的解释理解的更透彻了,感谢【@米西】同学!