#场景
一般情况下，我们使用工程化构建应用，需要的是导入 Vue 和 VueRouter，然后要调用 Vue.use(VueRouter)
那么，如果是非模块化 vue 使用 vue-router 应用的实现，是怎么样的呢？
🍭 下面是贴代码时间：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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue-router</title>
<style>
[v-cloak]{
display: none;
}
body,html{
text-align: center;
}
.a-link{
display: block;
padding: 10px;
width: 100px;
margin: 10px auto;
text-decoration: none;
background-color: #009688;
color: #fff;
}
.a-link:hover{
background-color: #F2AA24;
}
/*没有数据，正在加载*/
.loading{
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.loading img{
height: 40px;
width: 40px;
animation: que 1.6s linear infinite;
}
@keyframes que{
/*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
0%{
/*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>Hello SPA App!</h1>
<!--全局组件-->
<hello></hello>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/photo" class="a-link">Go to Photo</router-link>
<router-link to="/album" class="a-link">Go to Album</router-link>
<router-link to="/user" class="a-link">Go to User</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
//全局组件
Vue.component('hello',{
data(){
return {
count: 0
}
},
template: `<button @click="count++">you clicked me {{ count }} times`
})
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。（组件配置对象）
// 可以从其他文件 import 进来
const Photo = {
data(){
return {
photos: []
}
},
template: `<div>
<div class='loading' v-if="!photos.length">
<img src='./image/loading.png'>
</div>
<div v-for="photo in photos">
<div>{{photo.title}}</div>
<img :src="photo.thumbnailUrl">
<img :src="photo.url">
</div>
</div>`
,
mounted(){
fetch('http://jsonplaceholder.typicode.com/photos?id=1')
.then(response => response.json()
).then(json => {
this.photos = json
console.log(this.photos)
})
}
}
const Album = {
data(){
return {
albums: []
}
},
template: `<div>
<div class='loading' v-if="!albums.length">
<img src='./image/loading.png'>
</div>
<div v-for="album in albums">
<div>{{album.title}}</div>
</div>
</div>`
,
mounted(){
fetch('http://jsonplaceholder.typicode.com/albums?userId=1')
.then(response => response.json()
).then(json => {
this.albums = json
console.log(this.albums)
})
}
}
const User = {
data(){
return {
users: []
}
},
template: `<div>
<div class='loading' v-if="!users.length">
<img src='./image/loading.png'>
</div>
<div v-for="user in users">
<div>{{user.name}}</div>
</div>
</div>`
,
mounted(){
fetch('http://jsonplaceholder.typicode.com/users')
.then(response => response.json()
).then(json => {
this.users = json
console.log(this.users)
})
}
}
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/photo', component: Photo },
{ path: '/album', component: Album },
{ path: '/user', component: User }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
🍳 以上，单个 HTML 页面就能实现 (≖ᴗ≖)✧
最简单的非模块化 vue 路由应用了~~~
