|-- pages                 // 頁(yè)面組件
|   |-- topic             // 主題模塊
|       |-- Detail.vue    // 主題詳情
|       |-- List.vue      // 主題列表
|-- router                // router相關(guān)
|   |-- index.js          // 入口文件
|   |-- router.js         // 實(shí)例化VueRouter
|-- vuet                  // vuet相關(guān)
|   |-- index.js          // 入口文件
|   |-- topic-detail.js   // 主題詳情的狀態(tài)
|   |-- topic-list.js     // 主題列表的狀態(tài)
|   |-- vuet.js           // 實(shí)例化Vuet
|- index.html             // 程序頁(yè)面入口文件
|- main.js                // Vue實(shí)例化入口文件

npm install vue vue-router vuet --save

  import Vue from 'vue'
  import router from './router/'
  import vuet from './vuet/'
  export default new Vue({
    el: '#app',
    vuet,
    router,
    render (h) {
      return h('router-view')
    }
  })

  import vuet from './vuet'
  export default vuet

  import Vue from 'vue'
  import Vuet from 'vuet'
  import topicList from './topic-list'
  import topicDetail from './topic-detail'
  Vue.use(Vuet)
  const vuet = new Vuet({
    data () {
      return {
        loading: true, // 請(qǐng)求中
        loaderr: false // 請(qǐng)求失敗
      }
    },
    pathJoin: '-', // 父子模塊的連接路徑
    modules: {
      topic: {
        list: topicList,
        detail: topicDetail
      }
    }
  })
  vuet.beforeEach(({ path, params, state }) => {
    state.loading = true
    state.loaderr = false
  })
  vuet.afterEach((err, { path, params, state }) => {
    state.loading = false
    state.loaderr = !!err
  })
  export default vuet

  export default {
    routeWatch: 'query', // 定義頁(yè)面的更新規(guī)則
    data () {
      return {
        data: [],
        tabs: [
          {
            label: '全部',
            value: 'all'
          },
          {
            label: '精華',
            value: 'good'
          },
          {
            label: '分享',
            value: 'share'
          },
          {
            label: '問(wèn)答',
            value: 'ask'
          },
          {
            label: '招聘',
            value: 'job'
          }
        ]
      }
    },
    async fetch ({ route }) {
      const { tab = '' } = route.query
      const { data } = await window.fetch(`https://cnodejs.org/api/v1/topics?mdrender=false&tab=${tab}`).then(response => response.json())
      return {
        data
      }
    }
  }

  export default {
    routeWatch: 'params.id', // 定義頁(yè)面的更新規(guī)則
    data () {
      return {
        data: {
          id: null,
          author_id: null,
          tab: null,
          content: null,
          title: null,
          last_reply_at: null,
          good: false,
          top: false,
          reply_count: 0,
          visit_count: 0,
          create_at: null,
          author: {
            loginname: null,
            avatar_url: null
          },
          replies: [],
          is_collect: false
        }
      }
    },
    async fetch ({ route }) {
      const { data } = await window.fetch(`https://cnodejs.org/api/v1/topic/${route.params.id}`).then(response => response.json())
      return {
        data
      }
    }
  }

  import router from './router'
  export default router

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import TopicList from '../pages/topic/List'
  import TopicDetail from '../pages/topic/Detail'
  Vue.use(VueRouter)
  const RouterView = {
    render (h) {
      return h('router-view')
    }
  }
  const router = new VueRouter({
    routes: [
      {
        path: '/',
        component: RouterView,
        children: [
          {
            path: '',
            name: 'topic-list',
            component: TopicList
          },
          {
            path: '/:id',
            name: 'topic-detail',
            component: TopicDetail
          }
        ]
      }
    ]
  })
  export default router

<template>
  <!-- 
      設(shè)置指令監(jiān)聽全局滾動(dòng)條，
      注意了，光是設(shè)置指令可不行，還需要在組件中使用route規(guī)則，
      來(lái)處理頁(yè)面滾動(dòng)的操作，
      局部滾動(dòng)條直接去掉.window即可
      如果需要同時(shí)記錄全局滾動(dòng)條和div滾動(dòng)條直接設(shè)置.window.self即可
      它能做到N多個(gè)滾動(dòng)位置記錄，具體看官方文檔喔！
      注：記錄div滾動(dòng)的話，需要設(shè)置一個(gè)name來(lái)識(shí)別
      v-vuet-scroll="{ path: 'topic-detail', name: 'xxx' }"
  -->
  <div v-vuet-scroll.window="{ path: 'topic-list' }">
    <header>
      <ul>
        <li v-for="item in list.tabs">
          <router-link :to="{ name: 'topic-list', query: { tab: item.value } }">{{ item.label }}</router-link>
        </li>
      </ul>
    </header>
    <ul class="list">
      <li v-for="item in list.data">
          <router-link :to="{ name: 'topic-detail', params: { id: item.id } }">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // 設(shè)置模塊的更新規(guī)則
      mapRules({
        route: 'topic-list'
      }),
      // 連接模塊的狀態(tài)
      mapModules({
        list: 'topic-list'
      })
    ]
  }
</script>
<style scoped>

</style>

<template>
  <div v-vuet-scroll.window="{ path: 'topic-detail' }">
    <h3>{{ detail.data.title }}</h3>
    <div v-html="detail.data.content"></div>
  </div>  
</template>
<script>
  import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // 設(shè)置模塊的更新規(guī)則
      mapRules({
        route: 'topic-detail'
      }),
      // 連接模塊的狀態(tài)
      mapModules({
        detail: 'topic-detail'
      })
    ]
  }
</script>
<style scoped>
</style>