vue 导航路由的嵌套写法

路由：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);


const Content = () => import("../views/Content.vue");
const Home = () => import("../views/Home.vue");
const About = () => import("../views/About.vue");
const Detail = () => import("../views/Detail.vue");


const routes = [
    {
        path: "",
        redirect: "/content"
    },
    {
        path: "/content",
        name: "Content",
        component: Content,
        children: [
            {
                path: "",
                redirect: "/content/home"
            },
            {
                path: '/content/home',
                component: Home
            },
            {
                path: '/content/About',
                component: About
            }
        ]
    },
    {
        path: "/detail",
        name: "Detail",
        component: Detail
    },
];


const router = new VueRouter({
    routes
})

export default router

app.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
html,
body {
  height: 100%;
  margin: 0;
}
#app {
  height: 100%;
}
</style>

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

content.vue

<template>
  <div id="content">
    <div class="content-view"><router-view /></div>

    <div class="table-bar">
      <div @click="goHome">首页</div>
      <div @click="goAbout">关于</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.replace("/content/home");
    },
    goAbout() {
      this.$router.replace("/content/about");
    },
  },
};
</script>

<style scoped>
#content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content-view {
  flex: 1;
}
.table-bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 49px;
}
</style>>

home:

<template>
  <div id="home">
    <div @click="goDetail">首页</div>
  </div>
</template>

<script>
export default {
  methods: {
    goDetail() {
      this.$router.push("/detail");
    },
  },
};
</script>

<style scoped>
</style>

about:

<template>
  <div id="about">关于</div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>>

detail:

<template>
  <div id="detail">详情</div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>>