权限控制-动态生产路由（三）

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一种在前端应用中缓存路由信息并动态生成导航的方法。通过将后端返回的路由数据缓存到sessionStorage中，实现登录后动态加载路由及导航的功能。文章详细展示了如何使用Vue.js进行路由配置及导航生成。

6.缓存路由信息并且动态生成路由导航

缓存数据

 fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(ok);

        // 处理路由数据
        let children=[];
        // 遍历后台数据  生成我们的路由规则
        for(var i=0;i<ok.data.routerdata.length;i++){
        // 这里要先读取  否则在下面得路由拦截在中就没有办法获取了
          let routerdata=ok.data.routerdata[i]
          children.push({
            path:routerdata.path,
            name:routerdata.name,
            component: () => import(`@/views/${routerdata.demo}`)
          })
        }

        // 把children变量放到addRoutes生成的二级路由规则中
        // 处理路由数据

        // 缓存后台请求的路由数据方便动态生成导航
        window.sessionStorage.setItem("link",JSON.stringify(ok.data.routerdata))
        // 缓存后台请求的路由数据方便动态生成导航


        // 判断是否登录成功
        if(ok.data.userid!=-1){
          alert("欢迎您"+ok.data.msg)
          // 在登陆成功的时候使用addRoutes添加动态路由
          this.$router.addRoutes([
            {
              path:"/home",
              name:"hone",
              // 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
              component:Home,
              children//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
            }
          ])
        }else{
          alert("用户名密码错误请重新登录")
        }
      });
    },

在home页面生成二级路由导航与设置二级路由出口

<template>
  <div>
    我是首页
    <!-- 根据数据遍历生成导航 -->
    <router-link v-for="(v,i) in routerdata" :key="i" :to="'/home/'+v.path">{{v.path}}--{{v.name}}</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    data(){
        return {
            routerdata:[]
        }
    },
    mounted(){
        // 把得到的路由规则转换之后传递给data数据
         this.routerdata=JSON.parse(window.sessionStorage.getItem("link"))
    }
}
</script>

<style>

</style>

在登录页面请求完成后跳转到home页面

fun() {
      // 这里没有使用拦截器与api封装工作的时候需要使用
      $http({
        url: "http://localhost:8899/login",
        params: { uname: this.inputa, upwd: this.inputb },
      }).then((ok) => {
        console.log(ok);

        // 处理路由数据
        let children=[];
        // 遍历后台数据  生成我们的路由规则
        for(var i=0;i<ok.data.routerdata.length;i++){
          // 这里要先读取  否则在下面得路由拦截在中就没有办法获取了
          let routerdata=ok.data.routerdata[i]
          children.push({
            path:routerdata.path,
            name:routerdata.name,
            component: () => import(`@/views/${routerdata.demo}`)
          })
        }
     
        // 把children变量放到addRoutes生成的二级路由规则中
        // 处理路由数据

        // 缓存后台请求的路由数据方便动态生成导航
        window.sessionStorage.setItem("link",JSON.stringify(ok.data.routerdata))
        // 缓存后台请求的路由数据方便动态生成导航


        // 判断是否登录成功
        if(ok.data.userid!=-1){
          alert("欢迎您"+ok.data.msg)
          // 在登陆成功的时候使用addRoutes添加动态路由
          this.$router.addRoutes([
            {
              path:"/home",
              name:"home",
              // 不要忘了引用home页面 import Home from "@/views/HomeView.vue"
              component:Home,
              children//这里的children就是后台给我们的路由数据 但是我们需要处理路由数据
            }
          ])
            
          // 跳转到登录页面
          // 跳转到登录页面
          // 跳转到登录页面
          this.$router.push("/home")
        }else{
          alert("用户名密码错误请重新登录")
        }
      });
    },