demo

.nuxt/App.js

@@ -3,6 +3,8 @@ import NuxtLoading from '~/components/loading.vue'
 
 import '..\\assets\\main.css'
 
+import '..\\node_modules\\_swiper@4.0.7@swiper\\dist\\css\\swiper.min.css'
+
 
 let layouts = {
 

.nuxt/router.js

@@ -5,10 +5,13 @@ Vue.use(Router)
 
 const _916d4edc = () => import('..\\pages\\vehicle.vue' /* webpackChunkName: "pages_vehicle" */).then(m => m.default || m)
 const _55fc1c46 = () => import('..\\pages\\news.vue' /* webpackChunkName: "pages_news" */).then(m => m.default || m)
-const _1b4d0cd2 = () => import('..\\pages\\campsite.vue' /* webpackChunkName: "pages_campsite" */).then(m => m.default || m)
-const _1b677f5a = () => import('..\\pages\\aboutXx.vue' /* webpackChunkName: "pages_aboutXx" */).then(m => m.default || m)
+const _96254626 = () => import('..\\pages\\demo.vue' /* webpackChunkName: "pages_demo" */).then(m => m.default || m)
 const _0e939319 = () => import('..\\pages\\activity.vue' /* webpackChunkName: "pages_activity" */).then(m => m.default || m)
+const _1b677f5a = () => import('..\\pages\\aboutXx.vue' /* webpackChunkName: "pages_aboutXx" */).then(m => m.default || m)
+const _1b4d0cd2 = () => import('..\\pages\\campsite.vue' /* webpackChunkName: "pages_campsite" */).then(m => m.default || m)
 const _51cf86e2 = () => import('..\\pages\\tour.vue' /* webpackChunkName: "pages_tour" */).then(m => m.default || m)
+const _5df21ee8 = () => import('..\\pages\\demoList\\demoList.vue' /* webpackChunkName: "pages_demoList_demoList" */).then(m => m.default || m)
+const _802b9bc2 = () => import('..\\pages\\demoList\\_id.vue' /* webpackChunkName: "pages_demoList__id" */).then(m => m.default || m)
 const _e86eea90 = () => import('..\\pages\\index.vue' /* webpackChunkName: "pages_index" */).then(m => m.default || m)
 
 
@@ -80,9 +83,14 @@ export function createRouter () {
 			name: "news"
 		},
 		{
-			path: "/campsite",
-			component: _1b4d0cd2,
-			name: "campsite"
+			path: "/demo",
+			component: _96254626,
+			name: "demo"
+		},
+		{
+			path: "/activity",
+			component: _0e939319,
+			name: "activity"
 		},
 		{
 			path: "/aboutXx",
@@ -90,15 +98,25 @@ export function createRouter () {
 			name: "aboutXx"
 		},
 		{
-			path: "/activity",
-			component: _0e939319,
-			name: "activity"
+			path: "/campsite",
+			component: _1b4d0cd2,
+			name: "campsite"
 		},
 		{
 			path: "/tour",
 			component: _51cf86e2,
 			name: "tour"
 		},
+		{
+			path: "/demoList/demoList",
+			component: _5df21ee8,
+			name: "demoList-demoList"
+		},
+		{
+			path: "/demoList/:id?",
+			component: _802b9bc2,
+			name: "demoList-id"
+		},
 		{
 			path: "/",
 			component: _e86eea90,

.nuxt/utils.js

@@ -120,7 +120,7 @@ export async function setContext(app, context) {
       payload: context.payload,
       error: context.error,
       base: '/',
-      env: {}
+      env: {"host":"https://dev.dfangche.com"}
     }
     // Only set once
     if (context.req) app.context.req = context.req

nuxt.config.js

@@ -45,5 +45,12 @@ module.exports = {
                 return ['script', 'style', 'font'].includes(type)
             }
         }
+    },
+    env: {
+      host:"https://dev.dfangche.com"
+    },
+    generate: {
+      routes: [
+      ]
     }
 }

pages/demo.vue

+<template>
+  <div class="container">
+    <div class="left">
+      <h2>
+        <nuxt-link to="/demo">
+          Players
+        </nuxt-link>
+      </h2>
+      <ul class="players">
+        <li v-for="user in users" :key="user.id">
+          <nuxt-link :to="'/demoList/'+user.id">
+            {{ user.name }}
+          </nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <nuxt-child :key="$route.params.id" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+  export default {
+    async asyncData({ env }) {
+      const { data } = await axios.get( env.host + '/api/uccn/app/unauth/campsite/shops?type=53&pageNo=1&pageSize=10');
+      let cc = data.data.data;
+      console.log(data);
+
+//      return { users: env.users }
+      return { users: cc}
+    },
+//    asyncData ({ env }) {
+//      return { users: env.users }
+//    }
+  }
+</script>
+
+<style scoped>
+  .page-enter-active, .page-leave-active {
+    transition: opacity .4s, transform .4s;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    opacity: 1;
+  }
+  .page-enter, .page-leave-active {
+    opacity: 0.5;
+    transform: rotateY(100deg);
+  }
+  .container {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    box-sizing: border-box;
+  }
+  .left {
+    width: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .right {
+    width: 50%;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .players {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .players li a {
+    display: block;
+    border: 1px #ddd solid;
+    padding: 10px;
+    text-align: left;
+    color: #222;
+    text-decoration: none;
+  }
+  .players li a:hover {
+    color: orange;
+  }
+</style>

pages/demoList/_id.vue

+<template>
+  <div class="player">
+    <h1>{{ name }}</h1>
+    <h2>{{ name }}</h2>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+  export default {
+    validate ({ params }) {
+      console.log(params.id);
+      return !isNaN(+params.id)
+    },
+    async asyncData({ env, params, error}) {
+      const { data } = await axios.get( env.host + '/api/uccn/app/unauth/campsite/shop?id='+params.id);
+      let user = data.data;
+      if (!user) {
+        return error({ message: 'User not found', statusCode: 404 })
+      }
+      return user
+    },
+
+//    asyncData ({ params, env, error }) {
+////
+//      const user = env.users.find(user => String(user.id) === params.id)
+//      if (!user) {
+//        return error({ message: 'User not found', statusCode: 404 })
+//      }
+//      return user
+//    },
+    head () {
+      return {
+        title: this.name
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .player {
+    text-align: center;
+    margin-top: 100px;
+    font-family: sans-serif;
+  }
+</style>

pages/demoList/demoList.vue

+<template>
+  <h2>Please select an user.</h2>
+</template>
+
+<script>
+  export default {
+    head: {
+      title: 'Please select an user'
+    }
+  }
+</script>
+
+<style scoped>
+  h2 {
+    text-align: center;
+    margin-top: 100px;
+    font-family: sans-serif;
+  }
+</style>