1340641314

After Vue 2.x was released, various versions of cNode Settings followed, but many of them did not allow clicking details from the list to return to the list to show the original data. Here I will introduce Vuet route plug-in, he can easily help you to achieve this function, we take the CNode community API as an example, step by step with you to achieve this function first step we need to install Vue, VueRouter, Vuet

npm install --save vue vue-router vuetCopy the code

Second, we create an instance of Vuet, vuet.js

import Vue from 'vue' import Vuet from 'vuet' Vue.use(Vuet) const { fetch } = window export default new Vuet({ data () { Return {}}, modules: {cnode: {// Define module name route: {// Use plugin list: Data () {return {list: []}}, watch: Fetch () {fetch () {fetch () {fetch () {fetch () {fetch () { Return a Promise const search = this.app.$route.fullpath.split ('? ')[1] || '' return fetch(`https://cnodejs.org/api/v1/topics?${search}`) .then(response => response.json()) .then((res) Data () {return {id: author_id: ", author_id: ", TAB: ", data () {return {id: ", author_id: ", TAB: '', content: '', title: '', last_reply_at: '', good: false, top: false, reply_count: 0, visit_count: 0, create_at: '', author: { loginname: '', avatar_url: '' }, replies: [], is_collect: false } }, watch: 'params.id', fetch () { return fetch(`https://cnodejs.org/api/v1/topic/${this.app.$route.params.id}`) .then(response => response.json()) .then((res) => { return res.data }) } } } } } })Copy the code

Third, we create instances of Vue and VueRouter, mian.js

import Vue from 'vue' import VueRouter from 'vue-router' import vuet from './vuet' import List from './List' import Use (VueRouter) const router = new VueRouter({routes: [{path: '/', name: 'index', component: List }, { path: '/:id', name: 'detail', component: Detail } ] }) export default new Vue({ el: Render (h) {return h('router-view')}}) render (h) {return h('router-view')}})Copy the code

Fourth, we create the List component list.vue

<template> <div> <header> <span v-for="(item, $index) in tabs" :key="item.value"> <router-link :to="{ name: 'index', query: { tab: item.value } }"> {{ item.label }} </router-link> </span> </header> <ul> <li v-for="(item, $index) in list.list" :key="item.id"> <router-link :to="{ name: 'detail', params: { id: item.id } }"> {{ item.title }} </router-link> </li> </ul> </div> </template> <script> import { mapMixins, mapState } from 'vuet' export default { mixins: [...mapMixins('cnode/route/list')], // link data to update logic data () {return {// Tabs: [{label: 'all', value: 'all'}, {label: 'essence ', value: 'good'}, {label:' share ', value: 'share'}, {value: label: 'q&a', 'ask'}, {label: 'recruitment', value: 'job'}]}}, // Link data to list, so this.list. XXX can access data in our vuet // ha ha, isn't it simple, computed: mapState({list: 'cnode/route/list' }) } </script>Copy the code

Fifth, we create the Detail component, detail.vue

<template>
  <div>
    <h2>{{ detail.title }}</h2>
    <article v-html="detail.content"></article>
  </div>
</template>
<script>
  import { mapMixins, mapState } from 'vuet'

  export default {
    mixins: [...mapMixins('cnode/route/detail')],
    computed: mapState({ detail: 'cnode/route/detail' })
  }
</script>
Copy the code

conclusion

Although vuet has only five built-in plug-ins, its compressed package is only 6KB, which is a small but complete package. Finally, give vuET’s official address, welcome everyone star