当前位置:网站首页>Use of five routing guards
Use of five routing guards
2022-04-23 17:15:00 【MiMenge】
What is route guard ?
It can be simply understood as the of routing components ’ Guard ’, In the process of entering a route, you must first leave your guard , Guards through other routes can access other routes .
Global route guard
Guard routes configured globally , All route navigation will be affected by the global route guard
- Global front route guard
In the process of routing and navigation , The page will enter the pre routing guard before jumping
Triggered before route switching , You can control the switching behavior of the route
beforeEach(to, from, next){}
Parameters : to The information of the target route of the handover is saved
from Save the information of the starting route of switching
next Control whether route navigation switching is blocked
-
Global post route guard
Post routing guard , Triggered after route navigation switching , It can be triggered after the route switching is successful , No need to switch next
afterEach(to, from){}
Parameters to The information of the target route of the handover is saved from Save the information of the starting route of switching
-
The global routing guard can be combined with meta Use
meta {} Save user-defined information in the form of key value pairs , It can be used with routing guard
Exclusive routing guard
beforeEnter(to, from, next){}
Use in a separate routing configuration , Control routing behavior separately , Similar to the global pre routing guard
test — Verification is required to jump to the specified route token, If not, intercept
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);
const routes = [{
path: '/',
name: 'index',
component: () => import('../views/index'),
// Establish routing rules
meta: {
isA: false }
}, {
path: '/about',
name: 'about',
component: () => import('../views/about'),
meta: {
isA: true }
}, {
path: '/self',
name: 'self',
component: () => import('../views/self'),
meta: {
isA: false }
}, {
path: '/route',
name: 'route',
component: () => import('../views/route'),
meta: {
isA: false },
// Route exclusive guard
// brforeEnter(to, from, next) {
// console.log(to, from, next());
// // This route has separate verification rules
// },
}]
const router = new Router({
mode: 'history',
routes,
})
// Global front route guard
// example - -- If not token You can't jump
router.beforeEach((to, from, next) => {
// console.log(to, from, to.meta.isA);
// Intercept according to the route
if (to.meta && to.meta.isA) {
// To determine if there is token, If not, intercept and jump
if (!localStorage.getItem('token')) {
alert(' No authority ')
return;
}
next();
} else {
next()
}
});
// Global post route guard
router.afterEach((to, from) => {
console.log(to, from);
document.title = to.name;
});
export default router;
Intercept
After a successful jump
You can change the corresponding title
Component guard
Similar to the use of global routing guard , However, this guard is only for a single component
Enter the component guard --- Trigger before entering the component
beforeRouteEnter(to, from, next){}
Leave the component guard --- Trigger after leaving the component
beforeRouteLeave(to, from, next){}
- test
export default {
name: "Route",
// Component guard ---- Trigger when entering the component --- The hook triggers before the lifecycle
beforeRouteEnter(to, from, next) {
console.log(" Enter the assembly ");
next();
},
// Component guard --- Triggered when leaving the component --- Before the hook is about to be destroyed (beforedestroy) Trigger
beforeRouteLeave(to, from, next) {
console.log(" Leave component ");
next();
},
beforeMount() {
console.log(" Life cycle beforeMount");
},
mounted() {
console.log(" Life cycle mounted");
},
deactivated() {
console.log(" Life cycle deactivated");
},
activated() {
console.log(" Life cycle activated");
},
beforeCreate() {
console.log(" Life cycle beforeCreate");
},
beforeDestroy() {
console.log(" Life cycle beforeDestroy");
},
destroyed() {
console.log(" Life cycle destroyed");
},
Entering and leaving components route
版权声明
本文为[MiMenge]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230553027341.html
边栏推荐
- Devexpress GridView add select all columns
- Calculation formula related to tolerance analysis
- Solution architect's small bag - 5 types of architecture diagrams
- ClickHouse-表引擎
- Using quartz under. Net core -- a simple trigger of [7] operation and trigger
- Wiper component encapsulation
- groutine
- PostgreSQL column storage and row storage
- Perception of linear algebra 2
- Further study of data visualization
猜你喜欢
[logical fallacy in life] Scarecrow fallacy and inability to refute are not proof
[WPF binding 3] listview basic binding and data template binding
ClickHouse-表引擎
Using quartz under. Net core -- general properties and priority of triggers for [5] jobs and triggers
Detailed explanation of Milvus 2.0 quality assurance system
RPC核心概念理解
Document operation II (5000 word summary)
ASP. Net core JWT certification
Perception of linear algebra 2
[PROJECT] small hat takeout (8)
随机推荐
Kingdee Cloud Star API calling practice
_ Mold_ Board_
New keyword learning and summary
About stream flow, write it down briefly------
oracle 中快速获取表的列名列表
Shell-cut命令的使用
Using quartz under. Net core -- preliminary understanding of [2] operations and triggers
If you start from zero according to the frame
Aiot industrial technology panoramic structure - Digital Architecture Design (8)
Clickhouse table engine
【解决报错】Error in v-on handler: “TypeError: Cannot read property ‘resetFields’ of undefined”
【题解】[SHOI2012] 随机树
Detailed explanation of Milvus 2.0 quality assurance system
Go language RPC communication
[difference between Oracle and MySQL]
Baidu Map 3D rotation and tilt angle adjustment
AIOT产业技术全景结构-数字化架构设计(8)
Shortcut keys (multiline)
EF core in ASP Generate core priority database based on net entity model
1-3 components and modules