Skip to content

Commit 70e0043

Browse files
committed
docs: [zh-cn] v-link new syntax
1 parent c90a2b1 commit 70e0043

File tree

4 files changed

+46
-6
lines changed

4 files changed

+46
-6
lines changed

docs/zh-cn/SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
- [基本用法](basic.md)
55
- [嵌套路由](nested.md)
66
- [路由对象和路由匹配](route.md)
7+
- [具名路径](named.md)
78
- [路由配置项](options.md)
89
- [router-view](view.md)
910
- [v-link](link.md)

docs/zh-cn/basic.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<h1>Hello App!</h1>
1010
<p>
1111
<!-- 使用指令 v-link 进行导航。 -->
12-
<a v-link="/foo">Go to Foo</a>
13-
<a v-link="/bar">Go to Bar</a>
12+
<a v-link="{ path: '/foo' }">Go to Foo</a>
13+
<a v-link="{ path: '/bar' }">Go to Bar</a>
1414
</p>
1515
<!-- 路由外链 -->
1616
<router-view></router-view>

docs/zh-cn/link.md

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
# v-link
22

3-
在启用了vue-router的应用里,你应该使用指令 `v-link` 来处理浏览时的跳转。原因如下:
3+
`v-link` 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。该指令接受一个 JavaScript 表达式,并会在用户点击元素时用该表达式的值去调用 `router.go`
44

5-
- 它在HTML5 history模式和hash模式下的工作方式相同,所以如果你决定改变模式,或者IE9浏览器退化为hash模式时,都不需要做任何改变。
5+
``` html
6+
<!-- 字面量路径 -->
7+
<a v-link="'home'">Home</a>
68

7-
- 在HTML5 history模式下,`v-link` 会监听点击事件,防止浏览器尝试重新加载页面。
9+
<!-- 效果同上 -->
10+
<a v-link="{ path: 'home' }">Home</a>
811

9-
- 在HTML5 history模式下使用 `root` 选项时,不需要再 `v-link` 的URL中包含 root 路径。
12+
<!-- 具名路径 -->
13+
<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>
14+
```
15+
16+
你应该使用 `v-link` 而不是 `href` 来处理浏览时的跳转。原因如下:
17+
18+
- 它在 HTML5 history 模式和 hash 模式下的工作方式相同,所以如果你决定改变模式,或者 IE9 浏览器退化为 hash 模式时,都不需要做任何改变。
19+
20+
- 在 HTML5 history 模式下,`v-link` 会监听点击事件,防止浏览器尝试重新加载页面。
21+
22+
- 在 HTML5 history 模式下使用 `root` 选项时,不需要再 `v-link` 的 URL 中包含 root 路径。
1023

1124
#### 链接活跃时的 class
1225

docs/zh-cn/named.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# 具名路径
2+
3+
在有些情况下,给一条路径加上一个名字能够让我们更方便地进行路径的跳转。你可以按照下面的示例给一条路径加上名字:
4+
5+
``` js
6+
router.map({
7+
'/user/:userId': {
8+
name: 'user', // 给这条路径加上一个名字
9+
component: { ... }
10+
}
11+
})
12+
```
13+
14+
可以如下用 `v-link` 链接到该路径:
15+
16+
``` html
17+
<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>
18+
```
19+
20+
同样,也可以用 `router.go()` 来切换到该路径:
21+
22+
``` js
23+
router.go({ name: 'user', params: { userId: 123 }})
24+
```
25+
26+
以上两种情况,路由都会最终切换到 `/user/123`

0 commit comments

Comments
 (0)