From 1ada19f4e4b23c4f5ff9bade1cfc68ad3d76641f Mon Sep 17 00:00:00 2001
From: Savior <17685400625>
Date: Wed, 9 Mar 2022 18:25:21 +0800
Subject: [PATCH] 3.9
---
src/main.js | 32 +++++++++++++++++++++++++++-----
src/pages/nav.vue | 24 ++++++++++++++++++++++++
导航守卫.xmind | Bin 58945 -> 237594 bytes
3 files changed, 51 insertions(+), 5 deletions(-)
diff --git a/src/main.js b/src/main.js
index a06e090..bdbd544 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,18 +22,27 @@ const routes = [
component:() => import("./pages/nav.vue"),
children:[{
path:"user",
- component: () => import("./pages/user.vue")
+ // 自己定义的东西，在路由跳转时用来判断是否允许跳转
+ meta:"user",
+ component: () => import("./pages/user.vue"),
// path:"/user",
// component: () => import("./pages/user.vue")
// 加了'/'就是绝对路径 后面不需要写父级路径 @click="$router.push('/user')"
// 不加'/'就是相对路径 后面就需要写父级路径 @click="$router.push('/nav/user')
+ beforeEnter: (to,from,next) => {
+ console.log("这是路由独享守卫")
+ next()
+ // 给特定路由的守卫，如果不加next，则无法跳转到当前页面，在前置导航守卫后被执行
+ }
},
{
path:"/",
+ meta:"index",
component: index
},
{
path:"aaa",
+ meta:"aaa",
component: () => import("./components/aaa.vue")
},
],
@@ -41,24 +50,37 @@ const routes = [
]
const router = new VueRouter({
+ mode:"history",
routes // (缩写) 相当于 routes: routes
})
-// 这个函数在页面跳转的时候，自动被执行，这就是导航守卫
+// 这个函数在页面刚要跳转的时候，自动被执行，这就是前置导航守卫
router.beforeEach((to,from,next) => {
// to中的path显示的是当前的路径
console.log(to)
// from中的path显示的是跳转到当前路径的之前的路径
console.log(from)
- console.log("这是导航守卫")
+ console.log("这是前置导航守卫")
+ next()
// next控制页面的跳转
// next()
- if(to.path != "/nav"){
+ /* if(to.path != "/nav"){
console.log("执行next")
next()
}else{
alert("无法访问")
- }
+ } */
+})
+
+// 这个函数在页面准备要跳转的时候，自动被执行，这就是全局解析守卫，在前置导航守卫后被执行
+router.beforeResolve((to,from,next) => {
+ console.log("这是全局解析守卫")
+ next()
+})
+
+// 这个函数在页面完成跳转后，自动被执行，因为已经跳转完了，所以不需要next，叫全局后置钩子
+router.afterEach(() => {
+ console.log("跳转完成了")
})
new Vue({
diff --git a/src/pages/nav.vue b/src/pages/nav.vue
index 91e43e0..ab1a44b 100644
--- a/src/pages/nav.vue
+++ b/src/pages/nav.vue
@@ -48,6 +48,30 @@