preface

This article series: vue2.0 together in the sea of meng forced deeper (http://leenty.com/tags/vuejs/) said before a few articles of the vue – the router and vuex simple to use, the combination of both for practical application. The venue is in my Vue2.0 Demo, this is the source address, feel reliable welcome to add star to follow, there are questions welcome comments and correction ๐Ÿ˜ƒ OK finish account, say the content to complete this time. This time it’s a slide menu with zoom (a side pull bar) and a list of articles, as well as the display route of articles using Vuex for state management control CSS for animation transitions and vuE-Router for nested routines.

Drops drops! Please swipe your card on board!

The body of the

First of all, we completed the core function, that is, vue-Router nesting function

Nested routines by function

Sometimes we will have a template that is duplicated. Note that I am not talking about the duplication of a child template on its parent template, but the use of the same parent template across multiple pages. It’s like there are several paths

  • vue2.leenty.com/article/demo1
  • vue2.leenty.com/article/demo2
  • vue2.leenty.com/article/demo3

    You can see what’s in commonvue2.leenty.com/article. 
    /article/demo1                 /article/demo2               /article/demo3
+------------------+           +-----------------+          +-----------------+
| article          |           | article         |          | article         |
| +--------------+ |           | +-------------+ |          | +-------------+ |
| | demo1        | |  +----->  | | demo2       | | +----->  | | demo3       | |
| |              | |           | |             | |          | |             | |
| +--------------+ |           | +-------------+ |          | +-------------+ |
+------------------+           +-----------------+          +-----------------+
Copy the code

Yes, this path points to the parent template, which is repeatedly rendered in multiple child paths. If we didn’t nested it, we would not only write too much, but also render too much in vuejs, because the template is used over and over again and re-rendered every time. So, let’s start doing nested routines! Routes.js (routes.js, routes.js, routes.js, routes.js, routes.js) One is the route export file router.js where we assume a basic route (which is covered in chapter 2 of this series)

const routes = [ { name: 'Article', path: '/article', component: Require ('./components/ article.vue ') // For the convenience of writing and doing asynchronous components, the original import mode is changed to require mode // this is not essentially the same as before, just the simple writing method is different.  } ] export default routesCopy the code

Ok, let’s add subpaths. There are already five articles in this series, so let’s add them now. The current project path

SRC โ”œโ”€ Main.js # Vuejs Application โ”œโ”€ Router. Js # Route Export โ”œโ”€ Routes. Js # Route List โ”œโ”€ App.vue # Vuejs Application Root Template โ”œโ”€ Components โ”‚ โ”œโ”€ Home. Vue โ”‚ โ”œ โ”€ โ”€ Article. Vue โ”‚ โ”œ โ”€ โ”€ Demo. Vue โ”‚ โ”œ โ”€ โ”€... # for each route entry documents โ”‚ โ”” โ”€ โ”€ templates # stored template โ”‚ โ”œ โ”€ โ”€ AppArticleList. Vue # articles list โ”‚ โ”” โ”€ โ”€... โ”” โ”€ โ”€ store โ”‚ โ”œ โ”€ โ”€ index. The js # module assembly and export store place โ”‚ โ”œ โ”€ โ”€ actions. Js # root level action โ”‚ โ”œ โ”€ โ”€ mutations. Js # root level mutation โ”‚ โ”œ โ”€ โ”€ Types. Js # mutation namespace โ”‚ โ”” โ”€ โ”€ modules โ”‚ โ”œ โ”€ โ”€ demo. Js # demo module โ”‚ โ”” โ”€ โ”€ status. The js # global application state module โ”” โ”€ โ”€ md # for md file โ”” โ”€ โ”€ articles # Article path โ”œ โ”€ โ”€ vue2-1. Vue โ”œ โ”€ โ”€ vue2-2. Vue โ”œ โ”€ โ”€ vue2-3. Vue โ”œ โ”€ โ”€ vue2-4. Vue โ”” โ”€ โ”€ vue2-5. Vue (convenient to explain here, and will. Replace with md file. Vue file, ) (The effect is the same but in case the reader gets confused, the.vue file you can write something when you try it)Copy the code

When nested, a children node code will be added to the original routing object as follows:

Const routes = [{name: 'Article', path: '/ Article', const routes = [{name: 'Article', path: '/ Article', Require ('./components/ article.vue '), children: [// children node: pass a child route array of the same format as the parent route {name: 'vue2_1', path: 'vue2_1', // path: // '/article/vue2_1' // *** Note: Component: require('./md/articles/vue2-1.vue')}, {name: require('./md/articles/vue2-1.vue')} 'vue2_2', path: '/article/vue2_2', // shows an absolute path that vuejs understands as its original meaning '/article/vue2_2' // if only '/vue2_2' had been written, vuejs would have understood as '/vue2_2', // Don't worry about the display, there are some interesting differences in the URL. // You'll notice that the parent template still displays normally, although the URL is shorter. require('./md/articles/vue2-2.vue') }, { name: 'vue2_3', path: 'vue2_3', component: require('./md/articles/vue2-3.vue') }, { name: 'vue2_4', path: 'vue2_4', component: require('./md/articles/vue2-4.vue') }, { name: 'vue2_5', path: 'vue2_5', component: require('./md/articles/vue2-5.vue') } ] } ] export default routesCopy the code

Okay, so the nested pattern is set up

Manage the status of the side pull bar

Open the SRC/store/modules/status. The js code is as follows

import * as types from '.. /types' // import getScrollData from '.. /.. // scrollTop: 0, // scrollHeight: 0, // scrollHeight: 0 0, / / windowHeight: 0, / / / / scrollBottom: 0} const state = {articleList: false, / / a Boolean, said side pull switch scroll article list: {// windowHeight: 0, windowHeight: 0, windowHeight: 0, windowHeight: 0}} const getters = {// articleList: ({status}) => status.articlelist // tips: This method is wrong. State = state.status // state articleList: // state articleList: State => state.articlelist // set Getters, Open mutations = {[types.ARTICLE_LIST] (state) {state.articlelist =! ArticleList}, // set mutations, Only this method can change state [types.scrollData] (state, scrollObj) { state.scroll = scrollObj } } const actions = { articleListSwitch ({ commit }) { commit(types.ARTICLE_LIST) }, // Set actions where you can do some asynchronous work, Mutations alter state pushScrollData ({commit}) {commit(types.SCROLLDATA, getScrollData(), {silent: True}) // Because page scrolling is triggered frequently, it will affect our usual vuEX review, So choose silent submission}} export default {state, getters, actions, mutations} // Then the. Vue file can call auxiliary methods to achieve the purpose of obtaining or controlling the stateCopy the code

The best way to debug vuex is to use the Google plugin Devtools for vuejs or to download the source code from Github and compile it yourself. If you want to climb the wall, you need a VPN. If you want to climb the wall without VPN, I have a VPN here. Post a ladder recommendation code referyt.com/?r=f688f08a… , through the recommendation code registration can discount 10 yuan, the author can also get 10 yuan discount, in the preferential at the same time is also to encourage me ๐Ÿ˜‚

Render link list

The next thing to do is to do the link jump. Cut to the apparticlelist. vue file, which is the article list page. You can see this list in my Demo by clicking on the menu button in the upper left corner! (AppArticleList.vue)[/img/vue/AppArticleList.jpg]

Here’s what it looks like (because it’s a bit complicated, this is the core part I extracted for clarity) (the source file can be seen at github.com/leenty/vue2…)

// CSS will not say more @import '.. /.. /assets/stylus/preinstall' .articleList background-color c-master .articleList__content width s-articleList margin-top 8vh max-height 84vh color #fff .articleList__li transform translateX(-(s-articleList)) transition transform .3s cb-duang ArticleList__link width 100% line-height 1.3em padding-left 10px min-height 50px background-color Rgba (255,255,255,.1) &:hover background-color rgba(255,255,255,.3) SVG transform-origin bottom center transform Scale (.7). ArticleList__link --Active background-color rgba(255,255,255,.4). ArticleList --Active. ArticleList__li transform translateX(0) .articleList__title display block width 100% font-size 12px &:first-line font-size 14pxCopy the code

If the parent element is transformed, the position fixed of the child element will lose its effect and revert to position absolute: I tried to use CSS to bypass this problem before, but I found it was not possible, so I had no choice but to use JS to calculate the difference after the child elements degenerate into absolute, and then move it to achieve the visual effect. Interested can open vue2.leenty.com/article/vue… And then I’m going to look at the element, and I’m going to look at my navigation bar which is.header__content, and then you’re going to open up the sidebar and scroll up and down and you’re going to see the difference between.header__content and js not being complete

Loading nested routines by

Open the article. Vue file, which is very simple and reads as follows:




Copy the code

About the sequence of events that occur after triggering a scroll

With regard to triggering scrolling, the data is included in vuEX as part of the state, considering that there may be multiple pages that need to be rolled later. Finally, I put the listener inside app.vue to listen for the ‘scroll’ event and put it on vuex for any component that needs to use it




  @import './assets/stylus/main'
  .app__menu
    background-color c-master
  .app__content
    overflow auto
    transition transform .5s
    box-shadow 0 0 100px 5px rgba(0,0,0,0.3)
    background-color c-bgc
    transform-origin s-articleList center
  .app__content--Active
    transform scale(.9) translateX(s-articleList)
  .app__bodyer
    max-width max-width
    background-color c-bgc
  @media screen and (max-width: max-width)
    .app__bodyer
      padding 0 10px
Copy the code

Ok, this process comes down to the use of vuejs, VuE-Router and vuex

other

Demo address (http://vue2.leenty.com) source (https://github.com/leenty/vue2) making homepage, think on popular star to follow