vue子路由小实例

#vue子路由小实例(如有错误或更好写法还请指正)
实现效果

上代码

<template>
  <section id="childrenRouterPratice">
    <section class="box">
      <section class="box-title">
        <div
          class="title-card"
          v-for="(item) in titleList"
          :key="item.key"
          :class="{active: item.key == checkIndex}"
          @click="selectIcon(item.key)"
        >
          <span>{{item.name}}</span>
        </div>
      </section>
      <section class="box-body">
        <div v-show="this.checkIndex == 0">
          <router-view></router-view>
        </div>
        <div v-show="this.checkIndex == 1">
          <router-view></router-view>
        </div>
        <div v-show="this.checkIndex == 2">
          <router-view></router-view>
        </div>
      </section>
    </section>
  </section>
</template>
<script>
export default {
  name: "childrenRouterPratice",
  data() {
    return {
      titleList: [
        { key: 0, name: "基本资料" },
        { key: 1, name: "设置头像" },
        { key: 2, name: "安全中心" }
      ],
      checkIndex: 0
    };
  },
  methods: {
    selectIcon(index) {
      this.checkIndex = index;
      if(this.checkIndex == 0) {
        this.$router.push('/basicInfo')
      } else if(this.checkIndex == 1) {
        this.$router.push('/setPortrait')
      } else {
        this.$router.push('/securityCenter')
      }
    }
  },
  components: {}
};
</script>
<style scoped>
#childrenRouterPratice {
  width: 100%;
  height: 100%;
  font-size: 0.16rem;
}
.box {
  width: 100%;
  height: 5rem;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
}
.box-title {
  width: 100%;
  height: 0.8rem;
  background: #fff;
  display: flex;
}
.title-card {
  width: 33.3333%;
  text-align: center;
  height: 0.8rem;
  line-height: 0.8rem;
  box-sizing: border-box;
  border-bottom: 1px solid silver;
  color: black;
}
.title-card:nth-of-type(2) {
  border-right: 1px solid silver;
  border-left: 1px solid silver;
  box-sizing: border-box;
}
.active {
  color: #fff;
  background: #4773ff;
}
</style>

router.js 代码

{
      path: '/demo2',
      name: 'demo2',
      component: demo2,
      children: [
        {
          path: '/basicInfo',
          name: 'basicInfo',
          component: basicInfo,
        },
        {
          path: '/setPortrait',
          name: 'setPortrait',
          component: setPortrait,
          children: [
            {
              path: '/uploadImg',
              name: 'uploadImg',
              component: uploadImg,
            },
          ],
        },
        {
          path: '/securityCenter',
          name: 'securityCenter',
          component: securityCenter,
        },
      ],
    },

随后就可以在各个子路由页面写出相应的GUI东西啦