Vue——组件内部守卫，全局守卫，路由独享守卫
Vue——组件内部守卫，全局守卫，路由独享守卫：https://blog.csdn.net/chengzhangdewo/article/details/120770798
组件内部守卫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 4.路由的使用 -->
<router-link to="/user/1001">组件一</router-link>
<router-link to="/b">组件二</router-link>
<!-- 为组件加载提供容器/窗口 -->
<!-- 实现了组件之间的动态加载 -->
<router-view></router-view>
</div>
<script>
// 1.注册组件
let com1 = {
data() {
return {
id: null
}
},
template: `
<div>
组件一
{{id}}
</div>
`,
created() {
this.id = this.$route.params.id
// console.log(this.$route);
},
// 定义组件内部的守卫
// 5.1组件内部前置守卫
beforeRouteEnter(to, from, next) {
console.log('路由进入之前', to, from);
// 手动调用next()方法，确保路由跳转继续执行
next()
},
// 5.2组件内部更新守卫
beforeRouteUpdate(to, from, next) {
console.log('路由更新之前', to, from);
this.id = to.params.id
next()
},
// 5.3组件内部后置守卫（离开之前）
beforeRouteLeave(to, from, next) {
console.log('路由离开之前', to, from,);
next()
}
}
let com2 = {
data() {
return {}
},
template: `
<div>
组件二
</div>
`
}
// 2.定义路由
let router = new VueRouter({
routes: [
{
path: '/user/:id',
component: com1,
name: 'user'
},
{ path: '/b', component: com2 }
]
})
let vm = new Vue({
el: '#app',
data: {},
methods: {},
// 3.路由注册
router: router
})
</script>
</body>
</html>
全局守卫
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 4.路由的使用 -->
<router-link to="/user/1001">组件一</router-link>
<router-link to="/b">组件二</router-link>
<!-- 为组件加载提供容器/窗口 -->
<!-- 实现了组件之间的动态加载 -->
<router-view></router-view>
</div>
<script>
// 1.注册组件
let com1 = {
data() {
return {
id: null
}
},
template: `
<div>
组件一
{{id}}
</div>
`,
created() {
this.id = this.$route.params.id
// console.log(this.$route);
}
}
let com2 = {
data() {
return {}
},
template: `
<div>
组件二
</div>
`
}
// 2.定义路由
let router = new VueRouter({
routes: [
{
path: '/user/:id',
component: com1,
name: 'user'
},
{ path: '/b', component: com2 }
]
})
// 5.配置全局守卫
// 5.1配置全局前置守卫
router.beforeEach((to, from, next) => {
console.log('全局前置守卫', to, from);
next()
})
// 5.2配置全局后置守卫
router.afterEach((to, from) => {
console.log('全局后置守卫', to, from);
})
let vm = new Vue({
el: '#app',
data: {},
methods: {},
// 3.路由注册
router: router
})
</script>
</body>
</html>
路由独享守卫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 4.路由的使用 -->
<router-link to="/user/1001">组件一</router-link>
<router-link to="/b">组件二</router-link>
<!-- 为组件加载提供容器/窗口 -->
<!-- 实现了组件之间的动态加载 -->
<router-view></router-view>
</div>
<script>
// 1.注册组件
let com1 = {
data() {
return {
id: null
}
},
template: `
<div>
组件一
{{id}}
</div>
`,
created() {
this.id = this.$route.params.id
// console.log(this.$route);
}
}
let com2 = {
data() {
return {}
},
template: `
<div>
组件二
</div>
`
}
// 2.定义路由
let router = new VueRouter({
routes: [
{
path: '/user/:id',
component: com1,
name: 'user',
// 5.1配置路由独享守卫
beforeEnter(to, from, next) {
console.log('路由进入之前', to, from);
next()
}
},
{ path: '/b', component: com2 }
]
})
let vm = new Vue({
el: '#app',
data: {},
methods: {},
// 3.路由注册
router: router
})
</script>
</body>
————————————————
版权声明：本文为CSDN博主「chengzhangdewo」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chengzhangdewo/article/details/120770798
浙公网安备 33010602011771号