我的项目因为对接其他项目的原因，没有登录页面，但是有登录权限控制，所以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
            }]
        }
    ]
});