File tree Expand file tree Collapse file tree 4 files changed +46
-6
lines changed Expand file tree Collapse file tree 4 files changed +46
-6
lines changed Original file line number Diff line number Diff line change 4
4
- [ 基本用法] ( basic.md )
5
5
- [ 嵌套路由] ( nested.md )
6
6
- [ 路由对象和路由匹配] ( route.md )
7
+ - [ 具名路径] ( named.md )
7
8
- [ 路由配置项] ( options.md )
8
9
- [ router-view] ( view.md )
9
10
- [ v-link] ( link.md )
Original file line number Diff line number Diff line change 9
9
<h1 >Hello App!</h1 >
10
10
<p >
11
11
<!-- 使用指令 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 >
14
14
</p >
15
15
<!-- 路由外链 -->
16
16
<router-view ></router-view >
Original file line number Diff line number Diff line change 1
1
# v-link
2
2
3
- 在启用了vue-router的应用里,你应该使用指令 ` v-link ` 来处理浏览时的跳转。原因如下:
3
+ ` v-link ` 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。该指令接受一个 JavaScript 表达式,并会在用户点击元素时用该表达式的值去调用 ` router.go ` 。
4
4
5
- - 它在HTML5 history模式和hash模式下的工作方式相同,所以如果你决定改变模式,或者IE9浏览器退化为hash模式时,都不需要做任何改变。
5
+ ``` html
6
+ <!-- 字面量路径 -->
7
+ <a v-link =" 'home'" >Home</a >
6
8
7
- - 在HTML5 history模式下,` v-link ` 会监听点击事件,防止浏览器尝试重新加载页面。
9
+ <!-- 效果同上 -->
10
+ <a v-link =" { path: 'home' }" >Home</a >
8
11
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 路径。
10
23
11
24
#### 链接活跃时的 class
12
25
Original file line number Diff line number Diff line change
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 ` 。
You can’t perform that action at this time.
0 commit comments