美文网首页
Vue嵌套路由 子路由页面权限控制问题

Vue嵌套路由 子路由页面权限控制问题

作者: VIAE | 来源:发表于2020-12-25 14:33 被阅读0次

    我的项目因为对接其他项目的原因,没有登录页面,但是有登录权限控制,所以home页面首次进入时没有解析完用户信息的情况(这不是我能控制的,需求导致),再次api请求拿到解析完的用户信息之后,二次刷新子页面。。。enenen。。。直接上代码吧
    下面一串很长,只是一个结构样例,画个重点,控制子路由页面的权限主要靠路由拦截

    <router-view v-if="alive" />
    

    这是结构样例,用的view-design

    <template>
      <div class="layout">
        <!-- 左侧菜单 -->
        <div class="side-menu" >
          <Menu
            ref="menu"
            width="auto"
            theme="dark"
            :accordion="true"
            :active-name="activeMenu"
            :open-names="openMenu"
            @on-select="onMenuSelect"
          >
            <router-link class="router-link" to="/index">
              <MenuItem name="1" @click.native="reload('/index')">
                <Icon type="md-desktop" class="menu-icon" />首页
              </MenuItem>
            </router-link>
          </Menu>
        </div>
        <!-- topbar -->
        <div class="flex-row-between-center head">
          <div class="flex-row-start-center">
            <Icon
              @click.native="collapsedSider"
              type="md-menu"
            ></Icon>
          </div>
        </div>
        <!-- 页面内容 -->
        <div class="content" >
         <!-- 划重点划重点划重点划重点划重点划重点划重点划重点划重点划重点划重点划重点 -->
          <router-view v-if="alive" />
        </div>
      </div>
    </template>
    <script>
    import {isLogin} from '@/util.js'
    export default {
      data() {
        return {
          alive: true,
        };
      },
      computed: {
        activeMenu() {
          return this.$store.state.activeMenu;
        },
        openMenu() {
          return this.$store.state.openMenu;
        },
      },
      provide() {
        return {
          reload: this.reload,
        };
      },
      methods: {
        onMenuSelect(name) {
          this.$store.commit("setCurrentRoute", {
            activeMenu: name,
          });
          if (name === "1") {
            //如果是一级菜单项被选中需要把其他父菜单收起
            this.$store.commit("setCurrentRoute", {
              openMenu: [],
            });
          }
        },
        reload(url, type) {
          //每次点击菜单时进行用户登录是否过期判断
          isLogin();
          //reload用于刷新页面
          if (url) {
            //type用于保证菜单展开和选中状态是正确的
            if (!type)
              this.$store.commit("setIsLoadFromMenu", {
                isLoadFromMenu: true,
              });
            //当点击菜单是当前页面时,刷新页面
            if (this.$route.path == url) {
              this.alive = false;
              this.$nextTick(function () {
                this.alive = true;
              });
            }
          } else {
            this.alive = false;
            this.$nextTick(function () {
              this.alive = true;
            });
          }
        },
      },
      created() {
        // 获取登录信息
        isLogin().then(()=>{
          //路由拦截器
          this.alive = false;
            重新刷新子路由
          this.$nextTick(function () {
            this.alive = true;
          });
        });
      },
      mounted() {
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();
          this.$refs.menu.updateActiveName();
        });
      },
      updated() {
        this.$nextTick(() => {
          this.$refs.menu.updateOpened();
          this.$refs.menu.updateActiveName();
        });
      },
    };
    </script>
    <style>
    @import "./Layout.css";
    </style>
    

    vue嵌套路由

    import Vue from "vue";
    import Router from "vue-router";
    import Layout from "./components/Layout/Layout.vue";
    import Index from "./views/index/Index.vue";
    
    Vue.use(Router);
    export default new Router({
        routes: [{
                path: "/",
                name: "root",
                component: Layout,
                redirect: "/index",
                children: [{
                    path: "/index",
                    name: "index",
                    component: Index
                }]
            }
        ]
    });
    

    相关文章

      网友评论

          本文标题:Vue嵌套路由 子路由页面权限控制问题

          本文链接:https://www.haomeiwen.com/subject/dhlunktx.html