In-depth understanding of some advanced use of Vue Router

Today is to introduce the route meta information, rolling behavior, and routing lazy loading.

What is routing meta information, look at the interpretation of the official website, when the route can be configured to configure the META field, then we How to use it, a simple example, changing the value of the browser Title. The following code.

// Simple I don’t write direct solution Import Vue from ‘Vue-Router’Import login from’ ../login / Login’Import home from ‘../pages/home’Export default new router ({Mode:’ history ‘, routes: [{pat:’ home “, name: ‘Home’, Component: Home, Meta: {Title : “Home”}} {path: ‘login’, name: ‘login’, Component: Login, Meta: {Title: “}}]}) // You can jump before jump before jumping the name of the message. And use window.document.title to assign Router.BeForeeach ((to, from, next) => {window.document.title = to.meta.title})
Is it very simple, but it is not simple, I just got a relatively small example. I have to see how you live in this way, but I emphasize what you need to pay attention to

The first point is called before this beforeeeach page, the advantage is, if you want to change TItle value does not seem too abrupt, can be directly replaced.

The second point afterEach this I do not say this is to call it more suitable for areas visited before returning the page or the top of the page to return to operation after the component jump.

2. Scroll behavior

surely you students should know that I had to say yes that is a scrolling forward and back pages of the event, how to achieve it, there are two implementations, look at the code.

// just the way I said directly afterEach method to achieve scrollTo component zero Router.afterEach ((to, from, next) => {window. scrollTo (0,0)})
the following is a true rollback event can look at

// I simply do not write directly on the solution import Vue from ‘vue’import Router from’ vue-router’import Login from ‘../login/Login’import Home from’ ../pages/Home’export default new Router ({mode: ‘history’, routes: [{path: ‘home’, name: ‘Home’, component: Home, meta: {title: “Home”}} {path: ‘login’, name: ‘Login ‘, component: Login, meta: {title: “Login”}}], there are two small @ manner rollback // {x: number, y: number} // {selector: striNG, OFFSET?: {x: Number, Y: Number}} // The second method is only available for (Offset only in 2.6.0+ support) Scrollbehavior (to, from, savedPosition {console.log (savedPosition) Return {x: 0, y: 0}}
We introduced the scroll behavior of Scrollbehavior or the scroll behavior of Scrollbehavior, but you must be you may The method is still not understood, let’s take a look at how the official website explain, use the front-end route, when switching to the new route, want the page to roll to the top, or keep the original scroll position, just like reloading the page . Vue-router can do, and better, how you can customize how to switch when switching. That’s right, this method is Scrollbehavior rolling behavior. It is also important to note that this feature is only available in a browser that supports History.pushState. More usage methods can go to the official website to see.
3. Routing lazy loading

may not be called the routing lazy loading should be called on demand, I feel more appropriate. If you don’t explain, you will understand it. The following code. // The code is very simple to see, only some of the code {pat: ‘Homepages’, Name:’ HomePages, Component: HomePages, Resolve}

Yes, just use resolve to implement the requirements loaded on demand, it is not very simple, but resolve has many other ways recommendation to go to the official website. In addition, the use of GO (), History is still going to the official website to see what you write is appreciated. ”
The above is some advanced usage of the Vue Router introduced to you, I hope that everyone can help, if you have any questions, please give me Message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment