Vue Router实现路由嵌套单页面展示

import Vue from "vue";
import VueRouter from "vue-router";
import index from "../views/index.vue";

// 解决js路由跳转报错 Avoided redundant navigation to current location
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter);

const routes = [{
  path: "/",
  name: "index",
  component: index,
  children: [{
    path: "/login",
    name: "login",
    component: () =>
      import( /* webpackChunkName: "login" */ "../views/login.vue")
  }, {
    path: "/regist",
    name: "regist",
    component: () =>
      import( /* webpackChunkName: "regist" */ "../views/regist.vue")
  }]
}, {
  path: "/person",
  name: "person",
  component: () =>
    import( /* webpackChunkName: "person" */ "../views/person.vue")
}, ];

const router = new VueRouter({
  routes
});
export default router;

<template>
  <div class="home">
    <div class="left">
      <h1 @click="goLogin()">登录</h1>
      <router-link to="/regist">
        <h1>注册</h1>
      </router-link>
    </div>
    <div class="right">
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goLogin() {
      this.$router.push({
        path: "/login"
      });
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  display: flex;
}
.left {
  width: 30%;
  height: 700px;
  border-right: 5px solid #000;
  cursor: pointer;
}
.right {
  width: 70%;
  height: 700px;
}
</style>