preface

I haven’t seen you for a long time. I didn’t have time to write an article last week, but I am very happy that I finally have time to publish an article this week. As for the content of this article, we can see that there is not much, and it is aimed at those who have already had a preliminary understanding of VUe-Router.

To the chase

Today we are going to talk about the use of route meta-information, scrolling behavior, and lazy route loading

1. Route meta information

The meta field can be configured to match the meta field when defining a route. How to use it? A simple example is to change the browser title value. So here’s the code.

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 page"}}
        {path: 'login', name: 'Login', component: Login,meta:{title:"Login"BeforeEach ((to,from,next) => {}}]}) // Use window.document.title to assign Router. BeforeEach ((to,from,next) => { window.document.title=to.meta.title })Copy the code

This might look easy, but it’s not, and I’m just giving you a small example. It depends on how you use it, but what do I want to emphasize

The first is this beforeEach call before the page jumps. The advantage is that if you want to change the title value, for example, you can replace it.

AfterEach is called after a component has jumped and is more suitable for returning to a previously browsed area of the page or for returning to the top of the page.

2. Rolling behavior

I think you know what I’m talking about and that’s exactly what I’m talking about when I scroll forward and backward, and how do I do that? There’s two ways to do that. Let’s look at the code.

Router.aftereach ((to,from,next) => {window.scrollto (0,0)})Copy the code

Here are the actual rollback events to look at

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 page"}}
        {path: 'login', name: 'Login', component: Login,meta:{title:"Login"}}], // There are two small ways to rollback //{x: number, y: number} //{selector: string, offset? : { x: number, y: ScrollBehavior (to, from, savedPosition) {console.log(savedPosition) {console.log(savedPosition)return { x: 0, y: 0 }
    }
})
Copy the code

So, if you want to use a front end route, and you want to go to the top of the page when you switch to a new route, Or keep the original scrolling position as if the page were being reloaded. Vue-router can do this, and better, by letting you customize how the page scrolls when switching routes. That’s right, and that method is scrollBehavior. One more note: this feature is only available in browsers that support history.pushState. For more information, go to the official website.

3. Lazy route loading

Maybe it shouldn’t be called lazy load it should be called load on demand which I think is more appropriate. If you don’t explain it you’ll understand it when you use it more. So here’s the code.

// The code is very simple to see, the following is only part of the code {path:'homepages',name:'Homepages',component:homepages,resolve}
Copy the code

Sure, it’s easy to use Resolve to load on demand, but there are many other ways to use Resolve. In addition, the use of methods such as go() and history will be faster if you go to the official website to see how to write them out yourself.

Afterword.

In the end, I hope you can read more and understand it before using it in the project, so as not to have small bugs after using it. Thank you for watching my article, thank you.