Vue动态路由

vue 实现动态路由

很多时候我们在项目的路由都是在前端配置好的
但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。

1、沟通好数据

2、拿到数据需要自己处理

3、把后台提供的数据处理成我们需要的路由表，可以利用for循环来遍历路由数据

比如：

getData(){
        let url=""//请求的地址
        Http.get(url).then((res)=>{
          let arr=res.index//路由列表
          let routes=[]
        for(let i=0;i<arr.length;i++){
          let obj={
            path:"/"+arr[i].url,
            meta:{isshow:false},//meta标签可以根据自身需求动态添加
            component:()=>import("@/views/"+arr[i].url)
          }
          routes.push(obj)
        }
        this.$router.options.routes=routes
        this.$router.addRoutes(routes)//添加路由
      }).catch((err)=>{
        window.console.log(err)
      })
      }

 

 

4、添加到路由中

Router.addRoutes(路由数据)