cssjshtml vue.js 多级路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home'
import Menu from './components/Menu'
import Admin from './components/Admin'
import About from './components/about/About'
import Login from './components/Login'
import Register from './components/Register'

//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OderingGuide from './components/about/OderingGuide'

// 三级路由
import Person from './components/about/contact/PersonName'
import PhoneNumber from './components/about/contact/Phone'

Vue.use(VueRouter)

const routes = [
  {path: '/', component: Home},
  {path: '/menu', name: "menulink", component: Menu},
  {path: '/admin', name: "adminlink", component: Admin},
  {
    path: '/about', name: "aboutlink", redirect: '/about/contact', component: About, children: [
      {
        path: '/about/contact', name: "contactLink", redirect: '/personname', component: Contact, children: [
          {path: '/phone', name: "phoneNumber", component: PhoneNumber},
          {path: '/personname', name: "personName", component: Person}

        ]
      },
      {path: '/history', name: "historyLink", component: History},
      {path: '/delivery', name: "deliveryLink", component: Delivery},
      {path: '/oderingguide', name: "oderingGuideLink", component: OderingGuide},
    ]
  },
  {path: '/login', name: "loginlink", component: Login},
  {path: '/register', name: "registerlink", component: Register},
  {path: "*", redirect: '/'}
]
const router = new VueRouter({
  routes,
  mode: 'history'

})


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

<template>
  <div>
    <div class="row mb-5">
      <div class="col-4">
        <!-- 导航 -->
        <div class="list-group mb-5">
          <router-link tag="li" class="nav-link" :to="{name:'historyLink'}">
            <a class="list-group-item list-group-item-action">历史订单</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'contactLink'}">
            <a class="list-group-item list-group-item-action">联系我们</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'oderingGuideLink'}">
            <a class="list-group-item list-group-item-action">点餐文档</a>
          </router-link>
          <router-link tag="li" class="nav-link" :to="{name:'deliveryLink'}">
            <a class="list-group-item list-group-item-action">快递信息</a>
          </router-link>

        </div>
      </div>
      <div class="col-8">
        <!-- 导航内容 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "About"
  }
</script>

<style scoped>

</style>

<template>
  <div class="card text-dark bg-light mb-3">
    <div class="card-header">联系我们</div>
    <div class="card-body">
      <h4 class="card-title">联系我们</h4>
      <p class="card-text">277215243@qq.com</p>
      <router-link :to="{name:'phoneNumber'}">电话</router-link>
      <router-link :to="{name:'personName'}">联系人</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

</script>

<style scoped>

</style>

<template>
    <h1>brownwang</h1>
</template>

<script>
    export default {
        name: "PersonName"
    }
</script>

<style scoped>

</style>