What I want to introduce today is the use of routing meta information, scrolling behavior and lazy loading of routing.
1.Route meta information
What is routing meta information? Let’s take a look at the explanation of the official website. When defining routes, you can configure the meta field to match the meta field. So how should we use it? A simple example to change the value of the browser title. The following code is listed below.
//I won't write it and just put it on the solutionimport 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:"Homepage"}}
{path: 'login', name: 'Login', component: Login,meta:{title:"Log in"}}
]
})
//You can determine the name of the jump component before jumping and use assignment((to,from,next) => {
=
})
Does the above look simple, but it is not simple, I just gave a relatively small example. It also depends on how you learn and apply it in this way, but I emphasize a few points that need to be paid attention to.
The first point is that the beforeEach page is called before jumping. The advantage is that if you want to change the value of the title, it will not appear too abrupt, and you can replace it directly.
The second point is afterEach. I don’t need to say. This is called after the component jumps. It is more suitable for returning to the area you have browsed before the page or making the page return to the top.
2. Scrolling behavior
I believe all students should know what I am going to say. It is the scrolling event when the page is moving forward and backward. How to implement it? There are two ways to implement it. Let’s look at the code first.
//The method I just mentioned directly uses the afterEach method to implement the component scrollTo zeroing((to,from,next) => {
(0,0)
})
Here is the real rollback event to check out
//I won't write it and just put it on the solutionimport 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:"Homepage"}}
{path: 'login', name: 'Login', component: Login,meta:{title:"Log in"}}
]，
//There are two small ways to roll back //{ x: number, y: number }
//{ selector: string, offset? : { x: number, y: number }}
//The second method is only applicable (offset is only supported in 2.6.0+) scrollBehavior (to, from, savedPosition) {
(savedPosition)
return { x: 0, y: 0 }
}
})
Above we introduced the scrollBehavior rollback method or the scrolling behavior of scrollBehavior, but I believe you may not understand this method very well. Let’s take a look at how the official website explains it. Using front-end routing, when switching to a new route, you want the page to scroll to the top, or maintain the original scrolling position, just like reloading the page. vue-router can do it, and it's better, it allows you to customize how the page scrolls when routing switches. That's right, this method is scrollBehavior scrolling behavior. Also note: This feature is only available in supported browsers. For more usage methods, please go to the official website to check it out.
3. Lazy loading of routes
Maybe it shouldn't be called lazy loading, it should be called on-demand loading. I think it's more appropriate. If you don’t explain it, you will understand it if you use it too much. The following code is listed below.
//The code is very simple and you will know. Only some of the code is posted below{path:'homepages',name:'Homepages',component:homepages,resolve}
Yes, just use resolve to achieve the requirements of loading on demand. Isn’t it very simple? However, there are many other ways to use resolve to check it out on the official website. In addition, if you use methods such as go(), history, etc., go to the official website to read it and write it yourself, it will be faster to understand it.
Summarize
The above is some of the advanced usages of Vue router introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!