浅尝二级路由

package.json

@@ -15,7 +15,8 @@
     "amfe-flexible": "^2.2.1",
     "better-scroll": "^2.5.1",
     "postcss-pxtorem": "^6.1.0",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",

src/App.vue

@@ -1,14 +1,3 @@
-<script>
-import home from "@/pages/home/index.vue"
-export default {
-  components: {
-    home,
-  }
-}
-</script>
-
 <template>
-  <home />
+  <router-view></router-view>
 </template>
-<style scoped>
-</style>

src/components/MyFooter.vue

@@ -1,21 +1,21 @@
 <template>
   <footer>
-    <div class="item" @click="setIndex(0)" :style="{ 'color': footerIndex === 0 ? 'red' : '' }">
+    <router-link class="item" to="/movie/movies">
       <span class="iconfont icon-dianying"></span>
       <span>电影/影院</span>
-    </div>
-    <div class="item" @click="setIndex(1)" :style="{ 'color': footerIndex === 1 ? 'red' : '' }">
+    </router-link>
+    <router-link class="item" to="/movie/video">
       <span class="iconfont icon-shipin"></span>
       <span>视频</span>
-    </div>
-    <div class="item" @click="setIndex(2)" :style="{ 'color': footerIndex === 2 ? 'red' : '' }">
+    </router-link>
+    <router-link class="item" to="/movie/show">
       <span class="iconfont icon-piao"></span>
       <span>演出</span>
-    </div>
-    <div class="item" @click="setIndex(3)" :style="{ 'color': footerIndex === 3 ? 'red' : '' }">
+    </router-link>
+    <router-link class="item" to="/movie/user">
       <span class="iconfont icon-wode"></span>
       <span>我的</span>
-    </div>
+    </router-link>
   </footer>
 </template>
 <script>
@@ -64,4 +64,8 @@ footer {
     }
   }
 }
+
+.router-link-active {
+  color: @theme-color
+}
 </style>

src/main.js

@@ -3,4 +3,5 @@ import App from "./App.vue";
 import "amfe-flexible";
 import "@/assets/css/reset.css";
 import "@/assets/fonts/iconfont.css";
-createApp(App).mount("#app");
+import router from "@/router/";
+createApp(App).use(router).mount("#app");

src/pages/home/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="home">
-    <Headera>狗尾电影</Headera>
-    <Main />
-    <Footer />
-  </div>
-</template>
-<script>
-import Headera from "@/pages/home/components/MyHeader.vue";
-import Main from "@/pages/home/components/MyMain.vue";
-import Footer from "@/pages/home/components/MyFooter.vue";
-export default {
-  data() {
-    return {}
-  },
-  components: {
-    Headera,
-    Main,
-    Footer,
-  }
-};
-</script>
-<style lang="less" scoped>
-.home {
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  padding-bottom: 48px;
-  display: flex;
-  flex-direction: column;
-}
-</style>

src/pages/movie/components/MyHeader.vue

@@ -4,16 +4,9 @@
       <slot>未传入参数</slot>
       <span class="iconfont icon-caidan menu"></span>
     </h1>
-    <Nav />
   </header>
 </template>
 <script>
-import Nav from "@/pages/home/components/MyNav.vue";
-export default {
-  components: {
-    Nav,
-  }
-}
 </script>
 <style scoped lang="less">
 header {

src/pages/movie/components/MyNav.vue

@@ -1,6 +1,8 @@
 <template>
   <nav class="nav">
-    <span class="location">杭州</span>
+    <router-link to="/city">
+      <span class="location">杭州</span>
+    </router-link>
     <ul>
       <li v-for="(item, index) in list" @click="setIndex(index)" :class="{ active: activeIndex == index }">{{ item
       }}
@@ -50,7 +52,7 @@ export default {
     .center();
   }
 
-  >.location {
+  .location {
     padding-left: 15px;
   }
 

src/pages/movie/hot/MyMovies.vue

@@ -0,0 +1,17 @@
+<template lang="html">
+  <div>
+    <Nav></Nav>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+import Nav from '../components/MyNav.vue'
+import MyMain from './components/MyMain.vue';
+export default {
+  components: {
+    Nav,
+    MyMain
+  }
+}
+</script>
+<style lang="less"></style>

src/pages/movie/hot/components/MyMain.vue

@@ -9,12 +9,13 @@
 <script>
 import BScroll from 'better-scroll'
 import { nextTick } from 'vue'
-import MostPopular from "@/pages/home/components/MyMostPopular.vue"
-import MovieList from "@/pages/home/components/MyMovieList.vue"
+import MostPopular from './MyMostPopular.vue'
+import MovieList from './MyMovieList.vue'
+
 export default {
   components: {
     MostPopular,
-    MovieList
+    MovieList,
   },
   data() {
     return {
@@ -53,6 +54,7 @@ export default {
         }).then(res => res.json())
         this.more = [...this.more, ...data.data]
         this.startIndex += data.data.length
+        await nextTick();
         bs.refresh()
         bs.finishPullUp()
       })
@@ -65,13 +67,7 @@ export default {
   overflow: hidden;
   background-color: @background-color;
   flex-grow: 1;
-  margin: 95px 0 0 0;
   display: block;
-  // height: calc(100vh - 95px - 48px);
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 
   >.box {
     display: inline-flex;

src/pages/movie/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="home">
+    <!-- <Headera>狗尾电影</Headera>
+    <Main /> -->
+    <headera>狗尾电影</headera>
+    <router-view></router-view>
+    <Footer></Footer>
+  </div>
+</template>
+<script>
+import Headera from "@/pages/movie/components/MyHeader.vue";
+import Movies from "@/pages/movie/hot/MyMovies.vue";
+import Footer from "@/components/MyFooter.vue";
+export default {
+  data() {
+    return {}
+  },
+  components: {
+    Headera,
+    Movies,
+    Footer
+  }
+};
+</script>
+<style lang="less" scoped>
+.home {
+  padding-top: 51.17px;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  padding-bottom: 48px;
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/pages/show/index.vue

@@ -0,0 +1,13 @@
+<template lang="">
+  <div>
+      演出页
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="">
+  
+</style>

src/pages/user/index.vue

@@ -0,0 +1,13 @@
+<template lang="">
+  <div>
+    我的
+  </div>
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="">
+  
+</style>

src/pages/video/index.vue

@@ -0,0 +1,13 @@
+<template lang="">
+  <div>
+    视频页
+  </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="">
+
+</style>

src/router/index.js

@@ -0,0 +1,64 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Movie from "@/pages/movie/index.vue";
+import City from "@/pages/city/index.vue";
+import Video from "@/pages/video/index.vue";
+import Show from "@/pages/show/index.vue";
+import User from "@/pages/user/index.vue";
+import Movies from "@/pages/movie/hot/MyMovies.vue";
+import MyMain from "@/pages/movie/hot/components/MyMain.vue";
+const routers = {
+  history: createWebHistory(),
+  routes: [
+    {
+      path: "/",
+      redirect: "/movie",
+    },
+
+    {
+      path: "/movie",
+      component: Movie,
+      children: [
+        {
+          path: "/movie",
+          redirect: "/movie/hot",
+        },
+        {
+          path: "/movie/movies",
+          component: Movies,
+          children: [
+            {
+              path: "/movie/movies",
+              redirect: "/movie/movies/hot",
+            },
+            {
+              path: "/movie/movies/hot",
+              component: MyMain,
+            },
+            {
+              path: "/movie/movies/cinema",
+            },
+          ],
+        },
+        {
+          path: "/movie/video",
+          component: Video,
+        },
+        {
+          path: "/movie/show",
+          component: Show,
+        },
+        {
+          path: "/movie/user",
+          component: User,
+        },
+      ],
+    },
+    {
+      path: "/city",
+      component: City,
+    },
+  ],
+};
+
+const router = createRouter(routers);
+export default router;