How vue uses router.beforeEach to handle pre-jump logic

This article will explain in detail how vue uses router.beforeEach to deal with pre-jump logic. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Using router.beforeEach to handle pre-jump logic

In some cases, we need to deal with some specific business logic before route redirection, such as modifying route jump, setting title, and so on. The code is as follows:

Import Vue from 'vue'import Router from' vue-router'Vue.use (Router) / / Home const Home = (resolve = > {require.ensure (['.. / views/home.vue'], () = > {resolve (require ('.. / views/home.vue')})}) let base = `$ {process.env.BASE_URL} ` Let router = new Router ({mode: 'history', base: base, routes: [{path:' /', name: 'home', component: Home, meta: {title:' homepage'}},]}) router.beforeEach ((to, from, next) = > {let title = to.meta & & to.meta.title; if (title) {document.title = title / / set the page title} if (to.name = = 'home') {/ / intercept and jump to the page2 single page. The $openRouter method encapsulates Vue.$openRouter ({name:' page2'});} next ();} export default router in Section 5

Note that finally, you need to call the next () method to perform the route jump.

This is the end of this article on "how vue uses router.beforeEach to deal with pre-jump logic". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.