美文网首页
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嵌套路由 子路由页面权限控制问题

    我的项目因为对接其他项目的原因,没有登录页面,但是有登录权限控制,所以home页面首次进入时没有解析完用户信息的情...

  • 6 VUE路由

    vue-> SPA应用,单页面应用(引入vue-router.js) 路由嵌套(多层路由): 路由其他信息:

  • vue嵌套路由与404重定向实现方法分析

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由...

  • react路由基础配置

    1、根据路径加载对应页面内容2、路由跳转3、路由懒加载4、嵌套路由(子路由)5、路由管理6、路由跳转权限校验 1、...

  • vue嵌套路由

    嵌套路由 定义:路由中嵌套子路由,子路由中关键属性children例: 页面上 路由中

  • vue权限控制

    在SPA(单页面应用)中,前端需要根据用户的权限来控制用户菜单以及路由表,vue-router提供了几个路由生命周...

  • Vue Router 警告 ”[vue-router] Name

    如上代码,vue中使用路由嵌套调试时控制台给出以下警告 vue-router.png翻译:命名路由“home”具有...

  • 2018-09-26 路由

    路由.切换页面 2.路由嵌套

  • vue路由

    路由:vue-router 案例: 1.路由 2.路由的嵌套

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

网友评论

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

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