page

pages/README.md

+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the .vue files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing

pages/index.vue

+<template>
+  <div class="container">
+    <h2>新闻列表</h2>
+    <ul class="users">
+      <li v-for="user in users" :key="user.id">
+        <nuxt-link to="/users">{{ user.title }}</nuxt-link>
+        <div v-html="user.value"></div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  transition: 'bounce',
+  async asyncData() {
+    const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
+    let cc = data.data;
+    return { users: cc}
+  },
+
+}
+</script>
+
+<style scoped>
+.container {
+  text-align: center;
+  /* margin-top: 100px; */
+  font-family: sans-serif;
+}
+/* li{
+  text-decoration: none;
+} */
+.users {
+  list-style-type: none;
+}
+.users li a {
+  display: inline-block;
+
+  /* border: 1px #ddd solid; */
+  padding: 10px;
+  text-align: left;
+  color: #222;
+  text-decoration: none;
+}
+.users li a:hover {
+  color: orange;
+}
+</style>

pages/users.vue

+<template>
+  <div class="wrap">
+    <p>这里是详情页</p>
+    {{users}}
+    <nuxt-link to="/">返回首页</nuxt-link>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+export default {
+ transition: 'bounce',
+  async asyncData() {
+    const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
+    let cc = data.data;
+    return { users: cc}
+  },
+// asyncData() {
+//    return new Promise((resolve) => {
+//      setTimeout(function () {
+//        resolve({})
+//      }, 0)
+//    })
+//
+//  },
+  head: {
+    title: '详情页'
+  }
+}
+</script>
+<style scoped>
+.wrap{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 200px
+}
+</style>