Vue2 builds SPA applications that restore scrolling positions when pages are backward

When VUe2 was upgraded by VUE-CNode, there were two formal projects using VUe2 in the company. One of the most difficult problems was how to restore the data and scrollbar position when the page was backward. Although VUe2 had keep-alive components built in, Vue-router also provides the scrollBehavior method for setting, but it still fails to meet the requirements. Later, reading the source code of Vue-Router, I found that each page will automatically store a corresponding key value in the history.state object. Back, then use this feature to achieve the page article data and rolling reduction, but currently only has realized the top of the page component reduction, if needs to the top-level components under the child components for data reduction, can use the $options. _scopeId. Haha, how to achieve it depends on your imaginationCopy the code

1. The cloning project: git clone https://github.com/lzxb/vue-cnode.git 2. Install dependencies: NPM install 4. 5. Release code: NPM run distCopy the code

. | | - config / / project development environment configuration | -- index. Js / / package deployment configuration | - SRC / / source directory | | - components / / common components | | - content. vue / / Page content common components | | - data - null. Vue / / data is empty common components | | - footer. Vue / / navigation bar at the bottom of the common components | | -- header. Vue / / page head common components | | - index. The js / / Load a variety of common components | | - loading. Vue / / page load data common components | | - config / / routing configuration and application of basic information configuration | | -- config. The basic information of the js / / configuration items | | -- routes. Js / / Routing configuration page | | - CSS / / various CSS file | | - common. The CSS / / global common CSS file | | - iconfont / / a variety of fonts icon | | - images / / public image | | - less / / Various less file | | - common. Less / / global general less file | | -- config. Less / / global general less configuration file | | - lib / / plugins | | - the route data / / Page back data restoration, Scroll position reduction | | - mixins / / various global mixins | | - pull - list. Js / / tensile loading | | - pages / / various page components | | - about / / about | | | - index / / front page | - login / / login | | - my / / my home page, and the message list | | - signout / / exit | | - topic/theme/details, Theme new | | - user / / view user information | | - store / / vuex state management | | - index. The js / / loading various store module | | -- user. Js / / user store | | - the template / / various HTML file | | - index. The HTML / / program entrance HTML file | | - util/public/js method | | - app. Vue / / the entry file | | -- main. Js / / program entry documents, Load a variety of common components. | - babelrc / / ES6 grammar compiler configuration | -- webpack. Config. Js configuration | -- server. / / a package for a program of js / / development server | -- the README. | - md / / project Package. json // Configure the project information, which can be created by running the NPM init command.Copy the code