嵌套尽量不要超过三层.
不知道设计模式当中,有没有路由模式..呵呵..
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
<div id="app">
<div>welcome</div>
<router-link tag="li" class="good" v-for="item,index in goodList" :key="index" :to="{name : item.type}"></router-link>
<router-view></router-view>
<router-view name="bottom"></router-view>
这个叫命名视图,对应路由配置项中 components 里的 bottom,没有配置就不会渲染.
</div>
</template>
<script>
export default {
name : "App",
data () {
return {
goodList : [
{type:"foods",name : "食物"},
{type:"books",name : "书籍"},
{type:"yf",name : "衣服"}
]
}
},
created () {
console.log(this.$route);
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
.good{
display: inline-block;
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
}
.router-link-active{// 使用 嵌套路由时,会动态出现这两种类名.
background-color: lightcoral;
}
.router-link-exact-active{
background-color: aquamarine;
}
.active{// 可以在路由配置项中,更改字段.
background-color: lightcoral;
}
.exact{
background-color: aquamarine;
}
</style>
router.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter);
import Books from "../components/Books.vue"
import Foods from "../components/Foods.vue"
import yf from "../components/yj.vue"
import math from "../components/math.vue"
import edu from "../components/edu.vue"
import internet from "../components/internet.vue"
import ad from "@/components/ad.vue"
export default new VueRouter({
routes : [
{
path : "/books",
name : "books",
components : {// 配合命名视图.
bottom : ad,
default : Books
}
},
{
path : "/foods",
name : "foods",
component : Foods,
children : [// 嵌套路由
{
path : "edu",// 这里要注意, 不能用"/edu"
component : edu,
name : "edu"
},
{
path : "math",
component : math,
name : "math"
},
{
path : "internet",
component : internet,
name : "internet"
}
]
},
{
path : "/yf",
name : "yf",
component : yf
},
{
path : "*",
redirect : "/foods"
},
],
linkActiveClass : 'active',
linkExactActiveClass : 'exact'
});
Food.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
<div class="wrapper">
<div>这是食物</div>
// 哪个组件里嵌套路由的,就在哪个组件里写这个router-link 和 router-view
<router-link class="foodclass" tag="li" v-for="item,index in list" :to="{name : item.type}"></router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name : "Foods",
data () {
return {
list : [
{type : "edu"},
{type : "math"},
{type : "internet"},
]
}
}
}
</script>
<style>
.foodclass{
display: inline-block;
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
}
</style>
其他组件都是基本的.
过渡动画 App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<template>
<div id="app">
<div>welcome</div>
<router-link tag="li" class="good" v-for="item,index in goodList" :key="index" :to="{name : item.type}"></router-link>
<transition :name="dir">
<router-view class="view"></router-view>
</transition>
</div>
</template>
<script>
export default {
name : "App",
data () {
return {
goodList : [
{type:"foods",name : "食物"},
{type:"books",name : "书籍"},
{type:"yf",name : "衣服"}
],
dir : "left"
}
},
watch : {
$route (to, from) {
this.dir = to.meta.index < from.meta.index ? "left" : "right"
}
}
}
</script>
<style>
.left-enter,.right-leave-to{
transform: translateX(-100%);
}
.left-enter-to,.left-leave, .right-enter-to, .right-leave{
transform: translateX(0%);
}
.left-leave-to,.right-enter{
transform: translateX(100%);
}
.left-enter-active,
.right-enter-active,
.right-leave-active,
.left-leave-active{
transition: all 1s;
}
.view{
width: 100%;
height: 300px;
border: 2px solid black;
position: absolute;
}
*{
margin: 0;
padding: 0;
}
.good{
display: inline-block;
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #ccc;
border-radius: 10px;
cursor: pointer;
}
.router-link-active{
background-color: lightcoral;
}
.router-link-exact-active{
background-color: aquamarine;
}
.active{
background-color: lightcoral;
}
.exact{
background-color: aquamarine;
}
</style>
router.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter);
import Books from "../components/Books.vue"
import Foods from "../components/Foods.vue"
import yf from "../components/yj.vue"
import math from "../components/math.vue"
import edu from "../components/edu.vue"
import internet from "../components/internet.vue"
import ad from "@/components/ad.vue"
export default new VueRouter({
routes : [
{
path : "/books",
name : "books",
meta : {
index : 2
},
component : Books
},
{
path : "/foods",
name : "foods",
meta : {
index : 1
},
component : Foods,
},
{
path : "/yf",
name : "yf",
meta : {
index : 3
},
component : yf
},
{
path : "*",
redirect : "/foods"
},
],
linkActiveClass : 'active',
linkExactActiveClass : 'exact'
});
路由配置中有一个meta 字段, 可以在这里储存数据, 或者进行一些标记?
