Skip to content

Commit 0bde579

Browse files
xingwei07xingwei07
committed
增加history模式与hash模式
1 parent 752109f commit 0bde579

File tree

9 files changed

+415
-0
lines changed

9 files changed

+415
-0
lines changed

‎43_src_history模式与hash模式/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>

‎43_src_history模式与hash模式/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>

‎43_src_history模式与hash模式/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+
})

‎43_src_history模式与hash模式/pages/About.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
beforeRouteEnter (to, from, next) {
17+
console.log('about——beforeRouteEnter',to,from)
18+
if(to.meta.isAuth){
19+
if(localStorage.getItem('school') == 'atguigu') {
20+
next()
21+
} else {
22+
alert('无权限！')
23+
}
24+
}
25+
},
26+
beforeRouteLeave (to, from, next) {
27+
console.log('About——beofreRouteLeave',to,from)
28+
next()
29+
}
30+
}
31+
</script>

‎43_src_history模式与hash模式/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>

‎43_src_history模式与hash模式/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>

‎43_src_history模式与hash模式/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>

‎43_src_history模式与hash模式/pages/News.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div>
3+
<ul>
4+
<li :style="{opacity}">欢迎学习vue</li>
5+
<li>news001 <input type="text"></li>
6+
<li>news002 <input type="text"></li>
7+
<li>news003 <input type="text"></li>
8+
</ul>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'News',
15+
data() {
16+
return {
17+
opacity: 1
18+
}
19+
},
20+
beforeDestroy(){
21+
console.log('News组件即将被销毁了')
22+
},
23+
activated(){
24+
this.timer = setInterval(()=>{
25+
console.log('@')
26+
this.opacity -= 0.01
27+
if(this.opacity < 0) this.opacity = 1
28+
},16)
29+
console.log('News组件被激活了')
30+
},
31+
deactivated(){
32+
clearInterval(this.timer)
33+
console.log('News组件失活了')
34+
}
35+
}
36+
</script>

0 commit comments

Comments
 (0)