<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
全局前置守卫
beforeEach((to, from, next) => {})
全局解析守卫
beforeResolve((to, from, next) => {})
全局后置钩子
afterEach((to, from) => {})
router.全局守卫((to, from, [next]) => {})
路由独享守卫
beforeEnter((to, from, next) => {})
在配置路由是写在路由配置对象上的
routes: [
{
path: ‘/‘,
component: index,
beforeEnter (to, from, next) => {
}
}
]
组件内守卫
beforeRouteEnter((to, from, next) => {})
beforeRouteUpdate((to, from, next) => {})
beforeRouteLeave((to, from, next) => {})
组件内守卫写在组件内和组件生周期钩子函数的写法相同
const component = {
template: ``,
beforeRouteEnter (() => {}),
beforeRouteUpdate (() => {}),
beforeRouteLeave(() => {})
}
*/
/*
三种页面跳转
1 直接刷新页面
beforeEach
/ beforeEnter
组件中的beforeRouteEnter
全局解析守卫
全局后置守卫
路由跳转结束后
开始组件生命周期
创建前
创建后
挂载前
挂载后
2 路由改变但组件不变
全局前置守卫触发
组件内beforeRouteUpdate触发
beforeResolve
afterEach
3 路由改变组件改变
组件内beforeRouteLeave
beforeEach
to组件的路由独享守卫触发
to组件的beforeRouteEnter触发
beforeResolve
afterEach
to组件创建
to组件挂载前
from组件销毁
to组件挂载
beforeRouteLeave
beforEach
beforeRouteUpdate
beforeEnter
beforeRouteEnter
beforeResolve
afterEach
beforeRouteEnter中的this指向window，因为在其触发时组件还没有被创建
*/
</script>
<div id="app">
<nav>
<router-link to="/">首页</router-link>
<router-link to="/page">子页面</router-link>
</nav>
<router-view></router-view>
</div>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
<script>
const Index = {
template: `
<div>首页</div>
`,
beforeCreate () {
console.log(‘首页组件创建前‘)
},
created () {
console.log(‘首页组件创建后‘)
},
beforeMount() {
console.log(‘首页组件挂在前‘)
},
mounted () {
console.log(‘首页组件挂在后‘)
},
beforeDestroy () {
console.log(‘首页销毁前‘)
},
destroyed () {
console.log(‘首页销毁后‘)
},
beforeRouteEnter(to, from, next){
console.log(‘首页组件的enter守卫‘)
console.log(this)
next((vm)=>{
console.log(vm)
})
},
beforeRouteUpdate(to, from, next){
console.log(‘首页组件的update守卫‘)
console.log(this)
next()
},
beforeRouteLeave(to, from, next){
console.log(‘首页组件的leave守卫‘)
console.log(this)
next()
},
}
const Page = {
template: `
<div>子页面</div>
`,
beforeCreate () {
console.log(‘page组件创建前‘)
},
created () {
console.log(‘page组件创建后‘)
},
beforeMount() {
console.log(‘page组件挂在前‘)
},
mounted () {
console.log(‘page组件挂在后‘)
},
beforeRouteEnter(to, from, next){
console.log(‘page组件的enter守卫‘)
},
beforeRouteUpdate(to, from, next){
console.log(‘page组件的update守卫‘)
next()
},
beforeRouteLeave(to, from, next){
console.log(‘page组件的leave守卫‘)
next()
},
}
const router = new VueRouter({
routes: [
{
path: ‘/‘,
component: Index,
beforeEnter (to, from, next) {
console.log(‘/ 路由的独享守卫触发‘)
next()
}
}, {
path: ‘/page‘,
component: Page,
beforeEnter (to, from, next) {
console.log(‘/page 路由的独享守卫触发‘)
next()
}
}
]
})
router.beforeEach((to, from, next) => {
console.log(‘全局前置守卫触发‘)
next()
})
router.beforeResolve((to, from, next) => {
console.log(‘全局解析守卫触发‘)
next()
})
router.afterEach((to, from) => {
console.log(‘全局后置守卫触发‘)
})
const app = new Vue({
el: "#app",
router
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/bao2333/p/10278920.html
时间： 2024-08-30 13:25:43