Vue Router Router Router Details

Global front & back route guard

router/

import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/pages/List'
(VueRouter);
const router = new VueRouter({
	routes: [{
		path: '/list',
		component: List,
		meta: {  //Route metadata			title: 'List'
			...   // Customizable configuration parameters		}
	}]
});
// Prerequisite: Called before routing switch((to, from, next) => {});
// Post-set: Called after the routing switch is successful((to, from) => {});
export default router; 

illustrate

① ()It is a global forward route guard

② ()It is a global back-routing guard

③ to: Destination routing information

④ from: Departure route information

⑤ next: It is a function. Only when next() is called can the router continue to jump. It will directly intercept it without calling it.

⑥ The meta configuration item in routes can be configured with some custom parameters

Exclusive route guard

router/

import Vue from 'vue';
import VueRouter from 'vue-router';
import List from '@/pages/List';
import Detail from '@/pages/Detail';
(VueRouter);
export default new VueRouter({
	routes: [{
		path: '/list',
		component: List,
		children: [{
			path: 'detail',
			component: Detail,
			// Detail component exclusively enjoys this route guard			beforeEnter: (to, from, next) => {}
		}]
	}]
});

illustrate

① Internal componentbeforeEnter()It is a unique front-line route guard

② Exclusive router guard only has front but no back

③ Exclusive router guard and global router guard can be used together

In-component routing guard

Detail component

<template>
	<div></div>
</template>
<script>
export default {
	name: 'Detail',
	// Call before entering the component through route	beforeRouteEnter(to, from, next) {},
	// Called by routing before leaving the component	beforeRouteLeave(to, from, next) {}
}
</script>

illustrate

① beforeRouteEnter(), through routing, is called before entering the component

② beforeRouteLeave(), through routing, is called before leaving the component

③ Both need to call next() to release

This is the end of this article about the super detailed introduction of Vue Router Router Router. For more related content on Vue Router Router Router Router, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!