1

src/components/main/index1.vue

@@ -13,10 +13,9 @@
         <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
           >京ICP备16043923号-9</a
         >
-        0
       </div>
     </div>
-    <div class="navigationBar">
+    <div class="navigationBar" ref="navigationBar">
       <ul>
         <li>关于一手单</li>
         <li>合作品牌</li>
@@ -30,7 +29,7 @@
 <script>
 export default {
   // 组件名称
-  name: "main",
+  name: "Main",
   // 局部注册的组件
   components: {},
   // 组件参数 接收来自父组件的数据
@@ -63,9 +62,22 @@ export default {
    * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
    */
-  mounted() {},
+  mounted() {
+    let navigationBar = this.$refs.navigationBar;
+    if (this.$route.fullPath == "/main1") {
+      window.addEventListener("scroll", function () {
+        console.log(navigationBar.screenTop);
+      });
+    }
+    // console.log(navigationBar);
+  },
   // 组件方法
-  methods: {},
+  methods: {
+    changeStyle(e) {
+      console.log(e);
+      console.log(1);
+    },
+  },
 };
 </script>
 
@@ -108,9 +120,15 @@ export default {
   .navigationBar {
     > ul {
       display: flex;
+      margin: 0 auto;
+      justify-content: center;
+      align-items: center;
       width: 1200px;
       height: 96px;
       background-color: #fff;
+      li {
+        margin: 0 52px;
+      }
     }
   }
 }

src/router/index.js

@@ -15,6 +15,11 @@ const routes = [
         name: "Main",
         component: () => import("../components/main/index.vue"),
       },
+      {
+        path: "/main1",
+        name: "Main1",
+        component: () => import("../components/main/index1.vue"),
+      },
       {
         path: "/list",
         name: "JobList",