Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the problem of vue route guard and route guard infinite loop". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the problem of vue route guard and route guard infinite loop".

Post a wave of official documents first.

Const router = new VueRouter ({...}) router.beforeEach ((to, from, next) = > {/ /...})

When a navigation is triggered, the global front guard is called in the order in which it is created. The guard is executed asynchronously, and the navigation is waiting until all the guards have finished resolve.

Each guard method receives three parameters:

To: Route: the destination routing object to be entered

From: Route: the route from which the current navigation is leaving

Next: Function: be sure to call this method to resolve the hook. The execution effect depends on the calling parameters of the next method.

Next (): proceed to the next hook in the pipe. If all the hooks are finished, the navigation status is confirmed (confirmed).

Next (false): interrupts the current navigation. If the URL of the browser changes (either manually by the user or by the browser back button), the URL address is reset to the address of the from route.

Next ('/') or next ({path:'/'}): jump to a different address. The current navigation is interrupted and a new navigation is carried out. You can pass objects anywhere to next, and allow you to set options such as replace: true, name: 'home', and any options used in router-link 's to prop or router.push.

Next (error): (2.4.0+) if the parameter passed in next is an Error instance, the navigation is terminated and the error is passed to the callback registered by router.onError (). Be sure to call the next method, otherwise the hook will not be resolved

And then this is my own summary.

Import Vue from 'vue'import Router from' vue-router'import Login from'@ / pages/login/Login'import Index from'.. / pages/index/Index'import Library from'.. / pages/library/Library'import Design from'.. / pages/design/Design'import Administration from'.. / pages/administration/Administration'import Production from'.. / pages/production/Production'import Global from'.. / common/global/Global'Vue.use (Router) const router = new Router ({routes: [{path:'/' Name: 'login', component: Login}, {path:' / index', name: 'index', component: Index}, {path:' / library', name: 'library', component: Library}, {path:' / design', name: 'design', component: Design}, {path:' / administration', name: 'administration', component: Administration}, {path:' / production' Name: 'production', component: Production}]}) router.beforeEach ((to,from,next) = > {/ / put the routes of all pages that need to be logged in into an array const nextRoute = [' index', 'library',' design', 'administration',' production'] / / get login status let isLogin = Global.isLogin if (to.name = = 'login') {/ / if it is a login page, skip verification next () / / essential return / / the following code does not execute} if (nextRoute.indexOf (to.name) > = 0) {/ / determine whether the page needs to log in to if (! isLogin) {/ / determine login status next ({name:' login'}) / / if not logged in Then jump to the login page} else {next () / / if you have logged in, you can jump}} else {/ / other pages that do not need to log in without verifying next ()}) export default router

This implements the global routing guard.

On the problem of infinite loops of routing guards

If your code is like this,

If (isLogin) {next ()} else {next ({name: 'login')}}

In this way, you will fall into an infinite loop.

Because your next ({name: 'login')} is equivalent to a route jump, it will trigger the global route guard again, and you will enter the global route guard to judge again, and so on.

So, to end the routing guard, the logic of the entire code must end with next (). For example, as I wrote above, when you need to enter the login page

If (to.name = = 'login') {next () return}

With this judgment, next () will also be called when you enter the login page, and the route guard will enter the confirmation state before the route will jump.

Thank you for reading, the above is the content of "how to solve the problem of vue route guard and route guard infinite loop". After the study of this article, I believe you have a deeper understanding of how to solve the problem of vue route guard and route guard infinite loop, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.