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