Skip to content

Commit 63b3e58

Browse files
xingwei07xingwei07
committed
增加全局路由守卫
1 parent f5cb8bd commit 63b3e58

File tree

9 files changed

+379
-0
lines changed

9 files changed

+379
-0
lines changed

‎40_src_全局路由守卫/App.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div>
3+
<div class="row">
4+
<Banner />
5+
</div>
6+
<div class="row">
7+
<div class="col-xs-2 col-xs-offset-2">
8+
<div class="list-group">
9+
<!-- 原始html中使用a标签实现页面的跳转 -->
10+
<!-- <a href="./about.html" class="list-group-item active">About</a> -->
11+
<!-- <a href="./home.html" class="list-group-item">Home</a> -->
12+
13+
<!-- Vue中借助router-link标签实现路由的切换 -->
14+
<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
15+
<router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
16+
</div>
17+
</div>
18+
<div class="col-xs-6">
19+
<div class="panel">
20+
<div class="panel-body">
21+
<!-- 指定组件的呈现位置 -->
22+
<router-view></router-view>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
</template>
29+
30+
<script>
31+
import Banner from './components/Banner'
32+
export default {
33+
name:'App',
34+
components:{
35+
Banner
36+
}
37+
}
38+
</script>

‎40_src_全局路由守卫/components/Banner.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div class="col-xs-offset-2 col-xs-8">
3+
<div class="page-header">
4+
<h2>Vue Router Demo</h2>
5+
<button @click="back">后退</button>
6+
<button @click="forward">前进</button>
7+
<button @click="test">测试一下to</button>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'Banner',
15+
methods:{
16+
back(){
17+
this.$router.back()
18+
},
19+
forward(){
20+
this.$router.forward()
21+
},
22+
test(){
23+
// this.$router.go(2) //前进两步
24+
this.$router.go(-2) //后退两步
25+
}
26+
},
27+
}
28+
</script>

‎40_src_全局路由守卫/main.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//引入Vue
2+
import Vue from 'vue'
3+
//引入app
4+
import App from './App'
5+
//引入vue-router
6+
import VueRouter from 'vue-router'
7+
//引入路由器
8+
import router from './router'
9+
10+
//关闭vue的生产提示
11+
Vue.config.productionTip = false
12+
13+
//使用路由器
14+
Vue.use(VueRouter)
15+
16+
//创建vm
17+
new Vue({
18+
el:'#app',
19+
render: h => h(App),
20+
router
21+
// mounted(){
22+
// setTimeout(()=>{
23+
// this.$destroy()
24+
// },3000)
25+
// }
26+
})

‎40_src_全局路由守卫/pages/About.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<h2>我是About的内容</h2>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'About',
8+
mounted(){
9+
// console.log('About被挂载了')
10+
window.aboutRoute = this.$route
11+
window.aboutRouter = this.$router
12+
},
13+
// beforeDestroy(){
14+
// console.log('About被销毁了')
15+
// }
16+
}
17+
</script>

‎40_src_全局路由守卫/pages/Detail.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<ul>
3+
<li>消息编号：{{id}}</li>
4+
<li>消息标题：{{title}}</li>
5+
</ul>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name:'Detail',
11+
props:['id','title'],
12+
computed:{
13+
// id(){
14+
// return this.$route.params.id
15+
// },
16+
// title(){
17+
// return this.$route.params.title
18+
// }
19+
},
20+
mounted(){
21+
console.log(this)
22+
}
23+
}
24+
</script>

‎40_src_全局路由守卫/pages/Home.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div>
3+
<h2>Home组件内容</h2>
4+
<div>
5+
<ul class="nav nav-tabs">
6+
<li>
7+
<router-link to="/home/news" class="list-group-item" active-class="active">News</router-link>
8+
</li>
9+
<li>
10+
<router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>
11+
</li>
12+
</ul>
13+
<!-- 缓存一个路由组件 -->
14+
<!-- <keep-alive include="News">
15+
<router-view></router-view>
16+
</keep-alive> -->
17+
18+
<!-- 缓存多个路由组件 -->
19+
<keep-alive :include="['News','Message']">
20+
<router-view></router-view>
21+
</keep-alive>
22+
</div>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
name: 'Home',
29+
mounted(){
30+
// console.log('Home被挂载了')
31+
window.homeRoute = this.$route
32+
window.homeRouter = this.$router
33+
},
34+
// beforeDestroy(){
35+
// console.log('Home被销毁了')
36+
// }
37+
}
38+
</script>

‎40_src_全局路由守卫/pages/Message.vue

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div>
3+
<ul>
4+
<li v-for="m in messageList" :key="m.id">
5+
<!-- 跳转路由并携带参数，to的字符串写法 -->
6+
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->
7+
8+
<!-- 跳转路由并携带参数，to的对象写法 -->
9+
<!-- <router-link :to="{
10+
path:'/home/message/detail',
11+
query:{
12+
id:m.id,
13+
title:m.title
14+
}
15+
}"> -->
16+
<router-link :to="{
17+
name: 'detailName',
18+
query:{
19+
id:m.id,
20+
title:m.title
21+
}
22+
}">
23+
{{m.title}}
24+
</router-link>&nbsp;&nbsp;
25+
<button @click="push(m)">push查看</button>
26+
<button @click="replace(m)">replace查看</button>
27+
</li>
28+
</ul>
29+
<hr>
30+
<router-view></router-view>
31+
</div>
32+
</template>
33+
34+
<script>
35+
export default {
36+
name: 'Message',
37+
beforeDestroy(){
38+
console.log('Message组件即将被销毁了')
39+
},
40+
data(){
41+
return {
42+
messageList:[
43+
{id:'001', title:'消息001'},
44+
{id:'002', title:'消息002'},
45+
{id:'003', title:'消息003'}
46+
]
47+
}
48+
},
49+
methods:{
50+
push(m){
51+
this.$router.push({
52+
name: 'detailName',
53+
query:{
54+
id:m.id,
55+
title:m.title
56+
}
57+
})
58+
},
59+
replace(m){
60+
this.$router.replace({
61+
name: 'detailName',
62+
query:{
63+
id:m.id,
64+
title:m.title
65+
}
66+
})
67+
}
68+
},
69+
activated(){
70+
console.log('Message组件被激活了')
71+
},
72+
deactivated(){
73+
console.log('Message组件失活了')
74+
}
75+
}
76+
</script>

‎40_src_全局路由守卫/pages/News.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<ul>
4+
<li>news001 <input type="text"></li>
5+
<li>news002 <input type="text"></li>
6+
<li>news003 <input type="text"></li>
7+
</ul>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'News',
14+
beforeDestroy(){
15+
console.log('News组件即将被销毁了')
16+
},
17+
activated(){
18+
console.log('News组件被激活了')
19+
},
20+
deactivated(){
21+
console.log('News组件失活了')
22+
}
23+
}
24+
</script>

‎40_src_全局路由守卫/router/index.js

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
// 该文件专门用于创建整个应用的路由器
2+
import VueRouter from 'vue-router'
3+
4+
//引入组件
5+
import About from '../pages/About'
6+
import Home from '../pages/Home'
7+
import News from '../pages/News'
8+
import Message from '../pages/Message'
9+
import Detail from '../pages/Detail'
10+
11+
//创建并暴露一个路由器
12+
const router = new VueRouter({
13+
routes: [
14+
{
15+
name:'aboutName',
16+
path: '/about',
17+
component: About,
18+
meta:{
19+
title: '关于'
20+
}
21+
},
22+
{
23+
name: 'homeName',
24+
path: '/home',
25+
component: Home,
26+
meta:{
27+
title: '首页'
28+
},
29+
children:[
30+
{
31+
name: 'newsName',
32+
path: 'news',
33+
component: News,
34+
meta:{
35+
isAuth: true,
36+
title: '新闻'
37+
}
38+
},
39+
{
40+
name: 'messageName',
41+
path: 'message',
42+
component: Message,
43+
meta:{
44+
isAuth: true,
45+
title: '消息'
46+
},
47+
children:[
48+
{
49+
name:'detailName',
50+
//path:'detail/:id/:title', //params形式参数
51+
path:'detail', //query形式参数
52+
component:Detail,
53+
meta: {
54+
isAuth: true,
55+
title: '详情'
56+
},
57+
58+
// props的第一种写法，值为对象，该对象中所有key-value都会以props的形式传给Detail组件。
59+
// props:{
60+
// id:666,
61+
// title:'你好'
62+
// }
63+
64+
// props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
65+
// props:true
66+
67+
// props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
68+
props($route){
69+
return {
70+
id:$route.query.id,
71+
title:$route.query.title
72+
}
73+
}
74+
// props({query}){ //解构赋值
75+
// return {id:query.id,title:query.id}
76+
// }
77+
// props({query:{id,title}}){ //解构赋值的连续写法
78+
// return {id,title}
79+
// }
80+
}
81+
]
82+
}
83+
]
84+
}
85+
]
86+
})
87+
88+
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
89+
router.beforeEach((to, from, next)=>{
90+
console.log('前置路由守卫',to, from)
91+
if(to.meta.isAuth){
92+
if(localStorage.getItem('school') == 'atguigu') {
93+
next()
94+
} else {
95+
alert('无权限访问！')
96+
}
97+
} else {
98+
next()
99+
}
100+
})
101+
102+
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
103+
router.afterEach((to, after)=>{
104+
console.log('后置路由守卫',to,after)
105+
document.title = to.meta.title || '硅谷主页'
106+
})
107+
108+
export default router

0 commit comments

Comments
 (0)