改造null

Yi.Vue3.x.Vant/src/layout/bottom/index.vue

@@ -35,6 +35,7 @@ let tabbar=ref([
   {icon:"wap-home",to:"/",title:"主页"},
   {icon:"location-o",to:"",title:"发现"},
   {icon:"",to:"",title:""},
+  // {icon:"friends-o",to:"/shopIndex",title:"商城"},
   {icon:"friends-o",to:"",title:"商城"},
   {icon:"setting-o",to:"/my",title:"我的"},
 ])
@@ -43,6 +44,7 @@ const onChange=(index:number)=>{
   {icon:"wap-home-o",to:"/",title:"主页"},
   {icon:"location-o",to:"",title:"发现"},
   {icon:"",to:"",title:""},
+  // {icon:"friends-o",to:"/shopIndex",title:"商城"},
   {icon:"friends-o",to:"",title:"商城"},
   {icon:"setting-o",to:"/my",title:"我的"},
 ];

Yi.Vue3.x.Vant/src/layout/head/index.vue

@@ -0,0 +1,9 @@
+<template>
+    <van-nav-bar
+  title="标题"
+  left-text="返回"
+  left-arrow
+/>
+    <br>
+    <router-view />
+</template>

Yi.Vue3.x.Vant/src/router/index.ts

@@ -1,14 +1,20 @@
 import { createWebHistory, createRouter } from 'vue-router';
 import Layout from '@/layout/index.vue';
+import HeadLayout from '@/layout/head/index.vue'
 
 export const constantRoutes = [
-  
+
     {
       name:'Layout',
       path: '/',
       component: Layout,
       redirect:"/recommend",
       children: [
+        {
+          path: '/shopIndex',
+          component: () => import('@/view/shop/shopIndex.vue'),
+          name: 'ShopIndex',
+        },
         {
           path: '/my',
           component: () => import('@/view/my.vue'),
@@ -49,6 +55,25 @@ export const constantRoutes = [
       component: () => import('@/view/login.vue'),
       name: 'Login',
     },
+
+    {
+      name:'Shop',
+      path: '/shop',
+      component: HeadLayout,
+      redirect:"/shopIndex",
+      children: [
+        {
+          path: '/shopDetails',
+          component: () => import('@/view/shop/shopDetails.vue'),
+          name: 'ShopDetails',
+        },
+        {
+          path: '/shopSearch',
+          component: () => import('@/view/shop/shopSearch.vue'),
+          name: 'ShopSearch',
+        },
+      ]
+    }
   ];
 
   const router = createRouter({

Yi.Vue3.x.Vant/src/view/shop/shopDetails.vue

@@ -0,0 +1,5 @@
+<template>
+    这里是商品详情页
+<br>
+    <router-link to="/shopIndex">返回商品首页</router-link>
+</template>

Yi.Vue3.x.Vant/src/view/shop/shopIndex.vue

@@ -0,0 +1,23 @@
+<template>
+    这里是商城主页
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
+  <van-swipe-item>1</van-swipe-item>
+  <van-swipe-item>2</van-swipe-item>
+  <van-swipe-item>3</van-swipe-item>
+  <van-swipe-item>4</van-swipe-item>
+</van-swipe>
+<van-grid :column-num="4">
+  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
+</van-grid>
+    <router-link to="/shopSearch">点击前往搜索</router-link>
+    <br>
+</template>
+<style>
+  .my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+    background-color: #39a9ed;
+  }
+</style>

Yi.Vue3.x.Vant/src/view/shop/shopSearch.vue

@@ -0,0 +1,7 @@
+<template>
+    这里是商品搜索页
+    <br>
+    <router-link to="/shopDetails">点击进入商品详情</router-link>
+    <br>
+    <router-link to="/shopIndex">返回商品首页</router-link>
+</template>