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 @@