<template>
  <router-view/>
</template>

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/home.vue'
import Index from '../views/index.vue'
import Product from '../views/product.vue'
import Detail from '../views/detail.vue'
import OrderList from '../views/orderList.vue'
import OrderConfirm from '../views/orderConfirm.vue'
import OrderPay from '../views/orderPay.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    redirect: '/index',
    children: [
      {
        path: '/index',
        name: 'index',
        component: Index
      },
      {
        path: '/product/:id',
        name: 'product',
        component: Product
      },
      {
        path: '/detail/:id',
        name: 'detail',
        component: Detail
      }

    ]
  },
  {
    path: '/cart',
    name: 'cart',
    component: () => import(/* webpackChunkName: "about" */ '../views/cart.vue')
  },
  {
    path: '/order',
    name: 'order',
    component: () => import(/* webpackChunkName: "about" */ '../views/order.vue'),
    children: [
      {
        path: 'list',
        name: 'order-list',
        component: OrderList
      },
      {
        path: 'confirm',
        name: 'order-confirm',
        component: OrderConfirm
      },
      {
        path: 'pay',
        name: 'order-pay',
        component: OrderPay
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

<template>
  <div>
    home
    <NavHeader />
    <router-view />
    <NavFooter />
  </div>
</template>

<script>
import NavFooter from '../components/NavFooter.vue'
import NavHeader from '../components/NavHeader.vue'
export default {
  name: 'home',
  components: { NavHeader, NavFooter }

}
</script>

程序来到app.vue  发现router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view   因为访问的根组件因此router-view 变成 home视图  接着重定向后 router-view 又变成 index视图，接着访问product/xx 发现router-view 顾替换成 此页面，形成 index prodcut detail 三个页面的头部和尾部都是一样 的