vue动态添加路由

vueroutervue-router

在我们项目正常开发的时候少不了需要设置路由，然后还需要控制权限，控制权限的方式1.路由放在前端然后使用后端控制2.路由由后台返回来决定有没有这个页面
这样的话我们就需要去生成动态路由vue-router之前不支持生成路由,现在也可以了

动态引入文件用require进行异步引入文件

1
component:resolve => require([`@/views/page/${data[i].name}`], resolve),

我写了个动态生成路由的方法,不过没得什么时间去详细说基本上都是我自己看看如果有人看到了不懂可以找我940581896@qq.com我在这里就不说了以后也许想起来会来详解，但是感觉没可能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import {get_menu} from '@/api/index'
import Layout from '@/layout'
import twoLayout from '@/layout/twoLayout'
import store from "@/store";
export function inteRouter(){
    return new Promise((resolve,reject) => {
        if(store.getters.token){
            //获取路由
            get_menu().then(res=>{
                // let newRouterList=[]
                let intRouterList=res.data
                //拼接路由
                addInteRouter(intRouterList,0).then(resd=>{
                    // newRouterList.push(res)
                    return resolve(resd)
                })

            })
        }else{
            reject()
        }
    })
}
export function addInteRouter(data,pagePath){
    return new Promise((resolve) => {
        let newRouterList=[]
        for (let i = 0; i < data.length; i++) {
            if (data[i].children&&data[i].children.length>0){
                if(data[i].children.length===1&&pagePath===0){
                    if (data[i].children[0].children.length>0){
                        addInteRouter(data[i].children,pagePath+data[i].name).then(res=>{
                            newRouterList.push({
                                path: '/'+data[i].name,
                                name:data[i].name,
                                component: Layout,
                                meta:data[i].meta,
                                children:res
                            })
                        })
                    }else{
                        newRouterList.push({
                            path: '/'+data[i].name,
                            name:data[i].name,
                            component: Layout,
                            meta:data[i].meta,
                            redirect:'/'+data[i].children[0].name,
                            children:[
                                {
                                    path:'/'+data[i].children[0].name,
                                    component:resolve => require([`@/views/page/${data[i].name}/${data[i].children[0].name}`], resolve),
                                    meta:data[i].meta
                                }
                            ]
                        })

                    }
                }else{
                    if (pagePath===0){
                        addInteRouter(data[i].children,data[i].name).then(res=>{
                            newRouterList.push({
                                path: '/'+data[i].name,
                                name:data[i].name,
                                component: Layout,
                                meta:data[i].meta,
                                children:res
                            })
                        })
                    }else{
                        addInteRouter(data[i].children,pagePath+'/'+data[i].name).then(res=>{
                            newRouterList.push({
                                path: data[i].name,
                                name:data[i].name,
                                meta:data[i].meta,
                                component:twoLayout,
                                children:res
                            })
                        })

                    }
                }
            }else{
                if (pagePath!==0){
                    newRouterList.push({
                        path:data[i].name,
                        component:resolve => require([`@/views/page/${pagePath+'/'+data[i].name}`], resolve),
                        meta: {... data[i].meta,datad:[`@/views/page/${pagePath+'/'+data[i].name}`]}
                    })
                }else{
                    newRouterList.push({
                        path: '/'+data[i].name,
                        name:data[i].name,
                        component: Layout,
                        meta:data[i].meta,
                        redirect:'/'+data[i].name,
                        children:[
                            {
                                path:'/'+data[i].name,
                                component:resolve => require([`@/views/page/${data[i].name}`], resolve),
                                meta:data[i].meta
                            }
                        ]
                    })

                }
            }
        }
        resolve(newRouterList)
    })
}
1
2
3
4
5
6
7
8
inteRouter().then(res=>{
  // 动态添加路由
    //更新本地router的路 由vue-router动态添加路由$router.options不更新的解决办法
  router.options.routes=router.options.routes.concat(res)
    //动态添加路由
  router.addRoutes(res)
  store.commit('changeRoutesList')
})

赏

×

写着玩做笔记

扫码支持
小编不易来个几毛也是钱

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:vue动态添加路由

文章作者:霖

发布时间:2021年01月11日 - 14时49分

最后更新:2021年01月11日 - 17时44分

文章目录
,