Vue.js可以很方便的在页面返回时恢复滚动位置称为Vuet。它使用规则来驱动状态更新，它带来了开发效率的激增。它就像一片草原，而你就是一匹野马，任你驰骋。总之，它是为敏捷开发而生的。究其原因，在开发大型Vue应用时，往往难以克服多组件通信和多页面通信。一个页面组件中往往会混杂着获取页面数据的代码和响应用户操作的代码。它使代码混乱。A、B、C三个页面都需要相同的数据，然后每页写一次，发送一次请求。不久之后，代码变得非常臃肿。因此，我们需要一个vuex这样的第三方库来管理状态。Vuet的初衷是从列表点击到详情。从详情返回后，我们期望显示回到原来的位置，而不是重新初始化整个页面，再次请求数据。结果是极其糟糕的用户体验。我们期望一个规则来定义应该如何更新状态。这就是Vuet.js的初衷。它使用规则来定义状态更新，也是Vue.js的一种新的状态管理模式。天然的规则驱动让本教程的主题变得异常简单，因为我们只需要定义更新页面的规则就可以实现了。有了Vuex，Vuet还需要做什么？Vuex和Vuet的出发点不同。Vuex不推荐直接更新状态，而是通过提交mutation来更新状态，而Vuet允许。因此，Vuex和Vuet可以一起使用，并且有不同的应用场景。该用Vuex的地方就用Vuex。能用Vuet的地方就用Vuet，急需大家的支持。好吧，让我们开始这个话题吧！目录结构|--pages//页面组件||--topic//主题模块||--Detail.vue//主题详情||--List.vue//主题列表|--router//路由器相关||--index.js//入口文件||--router.js//实例化VueRouter|--vuet//vuet相关||--index.js//入口文件||--topic-detail.js//主题详情状态||--topic-list.js//主题列表状态||--vuet.js//实例化Vuet|--index.html//程序页面入口文件|--main.js//Vue实例化入口文件以上就是我们项目的基本目录结构安装模块。npminstallvuevue-routervuet--save这些是基本模块。不用说，每个人都知道。路由规则首先给出官方文档地址。本章的主题是路由规则的核心。它可以帮助您获取、更新和重置页面状态。配合v-route-scroll命令，可以帮你处理页面的全局滚动条。而div元素本身的滚动条代码社区api就是一个例子。main.jsimportVuefrom'vue'importrouterfrom'./router/'importvuetfrom'./vuet/'exportdefaultnewVue({el:'#app',vuet,router,render(h){返回h('router-view')}})vuet/index.jsimportvuetfrom'./vuet'exportdefaultvuetvuet/vuet.jsimportVuefrom'vue'importVuetfrom'vuet'importtopicListfrom'./topic-list'importtopicDetailfrom'./topic-detail'Vue.use(Vuet)constvuet=newVuet({data(){return{loading:true,//请求中的Loaderr:false//请求失败}},pathJoin:'-',//父子模块连接路径modules:{topic:{list:topicList,detail:topicDetail}}})vuet.beforeEach(({path,params,state})=>{state.loading=truestate.loaderr=false})vuet.afterEach((err,{path,params,state})=>{state.loading=falsestate.loaderr=!!err})exportdefaultvuetvuet/topic-list.jsexportdefault{routeWatch:'query',//定义页面数据的更新规则(){return{data:[],tabs:[{label:'All',value:'all'},{label:'Essence',value:'good'},{label:'Share',value:'share'},{标签:'问答',value:'ask'},{label:'recruitment',value:'job'}]}},asyncfetch({route}){const{tab=''}=route.queryconst{数据}=awaitwindow.fetch(`https://cnodejs.org/api/v1/topics?mdrender=false&tab=${tab}`).then(response=>response.json())return{data}}}vuet/topic-detail.jsexportdefault{routeWatch:'params.id',//定义页面数据的更新规则(){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},回复:[],is_collect:false}}},asyncfetch({route}){const{data}=awaitwindow.fetch(`https://cnodejs.org/api/v1/topic/${route.params.id}`).then(response=>response.json())return{data}}}router/index.jsimportrouterfrom'./router'exportdefaultrouterrouter/router.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importTopicListfrom'../pages/topic/List'importTopicDetailfrom'../pages/topic/Detail'Vue.use(VueRouter)constRouterView={渲染(h){returnh('router-view')}}constrouter=newVueRouter({routes:[{path:'/',component:RouterView,children:[{path:'',name:'topic-list',component:TopicList},{path:'/:id',name:'topic-detail',component:TopicDetail}]}]})exportdefaultrouterpages/topic/List.vue{{item.title}}
