前端vue实现配置动态路由

1.首先在router文件夹中创建一个js文件，文件中定义一个useaddRoute方法，并将它抛出，这个方法用于添加路由。

这里的方法主要是用于接收数据，将数据循环添加到路由中，代码如下直接复制即可。

import router from "@router/index";

export function useaddRoute(result) {

          let data = routesData(result)

              router.addRoutes(data)

}

function routesData(result) {

  const routes = []

  result.forEach(item => {

      routes.push({

          path: item.path,

          name: item.path,

          // 注意追加路径

          component: () => import(`../view${item.uri}`),

      })

  })

  return routes

}

2.首先登录成功后通过接口获取该用户的权限路由，获取后通过代码调用方法将获取到的路由json数据传入。（这里vuex配置我在上篇文章中有记载）

我这在成功后是将数据传输到vuex和localStorage中，这里是因为手动刷新页面后路由会消失

 useaddRoute(“数据json”);

 localStorage.setItem("routerlist", JSON.stringify(数据json));

this.$store.dispatch("setrouter",数据json);

3.使用过的小伙伴会发现，页面在操作的时候如果手动刷新页面，页面路由会消失，我这里其实是在开发APP端，虽然APP在使用过程中不会出现这个问题，但是开发的过程中还是发现了这个问题。这里需要设置路由守卫去判断用户是否刷新过页面。代码如下

因为vuex存储的是临时数据，包括token都是存储在vuex中所以页面刷新后也会消失，接口请求如果不携带token接口也会没有权限访问。所以通过vuex中数据是否消失来判断用户是否手动刷新过页面。然后丛localStorage中取出菜单树重新添加到路由中。

//路由守卫

router.beforeEach((to, from, next) => {

  //处理刷新界面动态路由丢失问题

  let userToken = store.getters.getToken;

    //动态数组丢失说明用户刷新了页面

    if (store.getters.getrouter.length == 0) {

      //从localStorage中获取菜单树。然后重新加载路由

      var routerlist = JSON.parse(localStorage.getItem("routerlist"));

      store.commit("setrouter", routerlist);

      routesData(routerlist);

      //确保addRoutes()时动态添加的路由已经被完全加载上去。

      next({ ...to, replace: true });

    } else {

      next();

    }

});