VueRouter實作路由嵌套單頁面展示

實作單頁面路由發生改變，頁面不進行跳轉

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>