- [新增] 因为滚动条受到全局的影响, 所以我们使用scrollBehavior路由钩子, 解决初始化问题

public/api/detail.json

@@ -0,0 +1,38 @@
+{
+  "ret": true,
+  "data": {
+    "sightName": "大连圣亚海洋世界(AAAA景区)",
+    "bannerImg": "http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg",
+    "gallaryImgs": [
+      "http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg",
+      "http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_800x800_9ef05ee7.png"
+    ],
+    "categoryList": [
+      {
+        "title": "成人票",
+        "children": [
+          {
+            "title": "成人三馆联票",
+            "children": [
+              {
+                "title": "成人三馆联票 - 某一连锁店销售"
+              }
+            ]
+          },
+          {
+            "title": "成人五馆联票"
+          }
+        ]
+      },
+      {
+        "title": "学生票"
+      },
+      {
+        "title": "儿童票"
+      },
+      {
+        "title": "特惠票"
+      }
+    ]
+  }
+}

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <keep-alive>
+        <keep-alive :exclude="['Detail']">
             <router-view />
         </keep-alive>
     </div>

src/router/index.js

@@ -24,4 +24,8 @@ export default new Router({
             component: Detail,
         },
     ],
+    scrollBehavior() {
+        return {x: 0, y: 0};
+    },
+
 });

src/views/Detail/index.vue

@@ -23,35 +23,24 @@
         },
         data() {
             return {
-                list: [{
-                    title: '成人票',
-                    children: [{
-                        title: '成人三馆门票',
-                        children: [{
-                            title: '成人3馆门票',
-                        }, {
-                            title: '成人5馆门票',
-                        }, {
-                            title: '成人8馆门票',
-                        }],
-                    }, {
-                        title: '成人五馆门票',
-                    }, {
-                        title: '成人八馆门票',
-                    }],
-                }, {
-                    title: '学生票',
-                }, {
-                    title: '儿童票',
-                }, {
-                    title: '特惠票',
-                }],
+                list: [],
             };
         },
         created() {
+            this.init();
         },
         computed: {},
-        methods: {},
+        watch: {
+        },
+        methods: {
+            async init() {
+                const {id} = this.$route.params;
+                const {data: {data: {categoryList}}} = await this.$axios.get('/api/detail.json', {
+                    params: {id},
+                });
+                this.list = categoryList;
+            },
+        },
     };
 </script>