Skip to content

Commit 4547b20

Browse files
dk-landk-lan
committed
modify by dk
1 parent 6d18d6b commit 4547b20

File tree

4 files changed

+366
-0
lines changed

4 files changed

+366
-0
lines changed

‎VueBasic/Router/README.md‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
# 路由
2+
通过 URL 映射到对应的功能实现，Vue 的路由使用要先引入 vue-router.js
3+
4+
## 基本路由入门
5+
定义 component
6+
```javascript
7+
const Foo = { template: '<div><h1>Foo Content</h1></div>' };
8+
const Bar = { template: '<div><h1>Bar Content</h1></div>' };
9+
```
10+
定义路由规则
11+
```javascript
12+
//每个路由应该映射一个组件。 其中"component" 可以是自定义的组件
13+
//当 url 为 http://localhost/index.html#/foo 页面会渲染组件 Foo
14+
//当 url 为 http://localhost/index.html#/bar 页面会渲染组件 Bar
15+
const routes = [
16+
{path: '/foo', component: Foo},
17+
{path: '/bar', component: Bar}
18+
]
19+
```
20+
使用
21+
```html
22+
<div id="app">
23+
<h1>Hello VueRouter</h1>
24+
<p>
25+
<!-- 使用 router-link 组件来导航. -->
26+
<!-- 通过传入 `to` 属性指定链接. -->
27+
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
28+
<!-- 属性 `to` 对应生成 `<a>` 标签的 `href` 属性-->
29+
<router-link to="/foo">Foo</router-link>
30+
<router-link to="/bar">Bar</router-link>
31+
</p>
32+
<!--路由匹配的组件在此处渲染-->
33+
<router-view></router-view>
34+
</div>
35+
```
36+
```javascript
37+
const router = new VueRouter({
38+
routes // （缩写）相当于 routes: routes
39+
})
40+
41+
new Vue({
42+
router
43+
}).$mount('#app')
44+
```
45+
[效果预览](https://dk-lan.github.io/vue-erp/VueBasic/Router/router.html)
46+
47+
## 路由参数
48+
```html
49+
<div id="app">
50+
<h1>Hello VueRouter</h1>
51+
<p>
52+
<router-link to="/user/1">User1</router-link>
53+
<router-link to="/user/2">User2</router-link>
54+
</p>
55+
<router-view></router-view>
56+
</div>
57+
```
58+
通过对象 $route.params 来获取参数
59+
```javascript
60+
const User = { template: '<div><h1>{{$route.params.userid}}</h1></div>' };
61+
62+
const routes = [
63+
{path: '/user/:userid', component: User}
64+
]
65+
66+
const router = new VueRouter({
67+
routes
68+
})
69+
70+
new Vue({
71+
router
72+
}).$mount('#app')
73+
```
74+
[效果预览](https://dk-lan.github.io/vue-erp/VueBasic/Router/params.html)
75+
76+
## 嵌套路由
77+
```html
78+
<div id="app">
79+
<h1>Hello VueRouter</h1>
80+
<p>
81+
<router-link to="/floor1">一楼</router-link>
82+
</p>
83+
<router-view></router-view>
84+
</div>
85+
```
86+
```javascript
87+
const Floor1 = {
88+
template: `
89+
<div>
90+
<h1>一楼</h1>
91+
<router-link to="/floor1/floor2">二楼</router-link>
92+
<router-view></router-view>
93+
</div>`
94+
};
95+
const Floor2 = { template: '<div><h1>二楼</h1></div>' };
96+
97+
const routes = [
98+
{
99+
path: '/floor1',
100+
component: Floor1,
101+
children: [{
102+
// floor2 会被渲染在 Floor1 的 <router-view> 中
103+
path: 'floor2',
104+
component: Floor2
105+
}]
106+
}
107+
]
108+
109+
const router = new VueRouter({
110+
routes
111+
})
112+
113+
new Vue({
114+
router
115+
}).$mount('#app')
116+
```
117+
[效果预览](https://dk-lan.github.io/vue-erp/VueBasic/Router/routerChildren.html)
118+
119+
## 编程式导航
120+
用 javascript 跳转路由
121+
```html
122+
<div id="app">
123+
<h1>Hello VueRouter</h1>
124+
<p>
125+
<!--用 `router-link` 组件进行跳转-->
126+
<router-link to="/floor1">一楼</router-link>
127+
<!--编程式导航1：router.replace-->
128+
<input type="button" value="一楼" @click="router.replace('/floor1')">
129+
<!--编程式导航2：router.push()-->
130+
<input type="button" value="一楼" @click="router.push('/floor1')">
131+
<!--编程式导航3：router.push({})-->
132+
<input type="button" value="一楼" @click="router.push({path: '/floor1'})">
133+
</p>
134+
<router-view></router-view>
135+
</div>
136+
```
137+
138+
## 命名路由
139+
在路由映射表中添加属性 name，用以对该路由映射规则命名，在编程式导航跳转路由时可以用 router.push({name: '名称'})
140+
```html
141+
<div id="app">
142+
<h1>Hello VueRouter</h1>
143+
<p>
144+
<router-link to="/floor1">一楼</router-link>
145+
<!--编程式导航4：router.push({name: '名称'})-->
146+
<input type="button" value="一楼" @click="router.push({name: 'floor1'})">
147+
</p>
148+
<router-view></router-view>
149+
</div>
150+
```
151+
```javascript
152+
const Floor1 = {
153+
template: `
154+
<div>
155+
<h1>一楼</h1>
156+
<router-link to="/floor1/floor2">二楼</router-link>
157+
<router-view></router-view>
158+
</div>`
159+
};
160+
const Floor2 = { template: '<div><h1>二楼</h1></div>' };
161+
162+
const routes = [
163+
{
164+
path: '/floor1',
165+
component: Floor1,
166+
name: 'floor1', //命名
167+
children: [{
168+
// floor2 会被渲染在 Floor1 的 <router-view> 中
169+
path: 'floor2',
170+
component: Floor2,
171+
name: 'floor2' //命名
172+
}]
173+
}
174+
]
175+
176+
const router = new VueRouter({
177+
routes
178+
})
179+
180+
new Vue({
181+
router
182+
}).$mount('#app')
183+
```
184+
185+
## 命名视图
186+
```html
187+
<div id="app">
188+
<h1>Hello VueRouter</h1>
189+
<p>
190+
<router-view></router-view>
191+
<router-view name="a"></router-view>
192+
<router-view name="b"></router-view>
193+
</p>
194+
</div>
195+
```
196+
```javascript
197+
const router = new VueRouter({
198+
routes: [
199+
{
200+
path: '/',
201+
components: {
202+
default: {
203+
template: '<h1>defalut router view</h1>'
204+
},
205+
a: {
206+
template: '<h1>a router view</h1>'
207+
},
208+
b: {
209+
template: '<h1>b router view</h1>'
210+
}
211+
}
212+
}
213+
]
214+
})
215+
216+
new Vue({
217+
el: '#app',
218+
router
219+
})
220+
```

‎VueBasic/Router/params.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>路由参数</title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<script type="text/javascript" src="../js/vue-router.js"></script>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<h1>Hello VueRouter</h1>
13+
<p>
14+
<!-- 使用 router-link 组件来导航. -->
15+
<!-- 通过传入 `to` 属性指定链接. -->
16+
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
17+
<!-- <a href="user.html?userid=1&id=2>用户1</a>" -->
18+
<router-link to="/user/1">User1</router-link>
19+
<!-- <a href="user.html?userid=2>用户2</a>" -->
20+
<router-link to="/user/2">User2</router-link>
21+
</p>
22+
<!-- 路由出口 -->
23+
<!-- 路由匹配到的组件将渲染在这里 -->
24+
<router-view></router-view>
25+
</div>
26+
27+
<script type="text/javascript">
28+
const User = { template: '<div><h1>{{$route.params.userid}}</h1></div>' };
29+
30+
const router = new VueRouter({
31+
routes: [
32+
{path: '/user/:userid', component: User}
33+
]
34+
})
35+
36+
const app = new Vue({
37+
router
38+
}).$mount('#app')
39+
</script>
40+
</body>
41+
</html>

‎VueBasic/Router/router.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>简单的路由入门</title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<script type="text/javascript" src="../js/vue-router.js"></script>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<h1>Hello VueRouter</h1>
13+
<p>
14+
<!-- 使用 router-link 组件来导航. -->
15+
<!-- 通过传入 `to` 属性指定链接. -->
16+
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
17+
<router-link to="/foo">Foo</router-link>
18+
<router-link to="/bar">Bar</router-link>
19+
</p>
20+
<!-- 路由匹配到的组件将渲染在这里 -->
21+
<router-view></router-view>
22+
</div>
23+
24+
<script type="text/javascript">
25+
// 1. 定义（路由）组件。
26+
const Foo = { template: '<div><h1>Foo Content</h1></div>' };
27+
const Bar = { template: '<div><h1>Bar Content</h1></div>' };
28+
29+
// 2. 定义路由
30+
// 每个路由应该映射一个组件。 其中"component" 可以是自定义的组件
31+
const routes = [
32+
{ path: '/foo', component: Foo },
33+
{ path: '/bar', component: Bar }
34+
]
35+
36+
// 3. 创建 router 实例，然后传 `routes` 配置
37+
const router = new VueRouter({
38+
routes // （缩写）相当于 routes: routes
39+
})
40+
41+
// 4. 创建和挂载根实例。
42+
// 记得要通过 router 配置参数注入路由，
43+
// 从而让整个应用都有路由功能
44+
const vm = new Vue({
45+
data: {name: 'Tom'},
46+
router
47+
}).$mount('#app')
48+
//vm.$mount = > 手动挂载
49+
</script>
50+
</body>
51+
</html>

‎VueBasic/Router/routerChildren.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>嵌套路由</title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<script type="text/javascript" src="../js/vue-router.js"></script>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<h1>Hello App</h1>
13+
<p>
14+
<!-- 使用 router-link 组件来导航. -->
15+
<!-- 通过传入 `to` 属性指定链接. -->
16+
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
17+
<router-link to="/floor1">一楼</router-link>
18+
</p>
19+
<!-- 路由匹配到的组件将渲染在这里 -->
20+
<router-view></router-view>
21+
</div>
22+
23+
<script type="text/javascript">
24+
const Floor1 = {
25+
template: `
26+
<div>
27+
<h1>一楼</h1>
28+
<router-link to="/floor1/floor2">二楼</router-link>
29+
<router-view></router-view>
30+
</div>`
31+
};
32+
const Floor2 = { template: '<div><h1>二楼</h1></div>' };
33+
34+
//user/123/profile
35+
var router = new VueRouter({
36+
routes: [{
37+
path: '/floor1',
38+
component: Floor1,
39+
children: [{
40+
// floor2 会被渲染在 Floor1 的 <router-view> 中
41+
path: 'floor2',
42+
component: Floor2
43+
}]
44+
}],
45+
})
46+
47+
const app = new Vue({
48+
el: '#app',
49+
router
50+
})
51+
</script>
52+
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)