File tree Expand file tree Collapse file tree 4 files changed +40
-5
lines changed Expand file tree Collapse file tree 4 files changed +40
-5
lines changed Original file line number Diff line number Diff line change 28
28
```
29
29
30
30
关于包含 ` name ` 的路径对象,参见[ 具名路径] ( ../named.md ) .
31
+
32
+ - 当用 ` path ` 格式跳转到一个相对路径时,可以用 ` append: true ` 选项来确保该相对路径始终被添加到当前路径之后。比如:
33
+
34
+ - 从 ` /a ` 跳转到 ` b ` 时,若没有 ` append: true ` ,则会跳转到 ` b ` ;
35
+ - 从 ` /a ` 跳转到 ` b ` 时,若有 ` append: true ` ,则会跳转到 ` /a/b ` 。
36
+
37
+ - 两种格式都接受 ` replace: true ` 选项,使得该跳转不产生一个新的历史记录。
Original file line number Diff line number Diff line change 23
23
24
24
#### 链接活跃时的 class
25
25
26
- 带有 ` v-link ` 指令的元素,如果 ` v-link ` 对应的 URL 匹配当前的路径,该元素会被添加特定的 class :
26
+ 带有 ` v-link ` 指令的元素,如果 ` v-link ` 对应的 URL 匹配当前的路径,该元素会被添加特定的 class。默认添加的 class 是 ` .v-link-active ` ,而判断是否活跃使用的是 ** 包含性匹配 ** 。举例来说,一个带有指令 ` v-link="/a" ` 的元素,只要当前路径以 ` /a ` 开头,此元素即会被判断为活跃。
27
27
28
- - 如果当前路径以 ` v-link ` 的 URL 开头,则 ` .v-link-active ` 这个 class 会被添加到该元素上。例如,一个带有指令 ` v-link="/a" ` 的元素,如果当前路径以 ` /a ` 开头,则此元素会被添加这个 class 。
28
+ 连接是否活跃的匹配也可以通过 ` exact ` 内联选项来设置为只有当路径完全一致时才匹配:
29
29
30
- - 如果 ` v-link ` 的URL精确匹配当前路径,则 ` .v-link-active-exact ` 会被添加到该元素上。
30
+ ``` html
31
+ <a v-link =" { path: '/a', exact: true }" ></a >
32
+ ```
33
+
34
+ 链接活跃时的 class 名称可以通过在创建路由器实例时指定 ` activeLinkClass ` 全局选项 来自定义,也可以通过 ` activeClass ` 内联选项来单独指定:
35
+
36
+ ``` html
37
+ <a v-link =" { path: '/a', activeClass: 'custom-active-class' }" ></a >
38
+ ```
39
+
40
+ #### 其他选项
41
+
42
+ - ** replace**
43
+
44
+ 一个带有 ` replace: true ` 的链接被点击时将会触发 ` router.replace() ` 而不是 ` router.go() ` 。由此产生的跳转不会留下历史记录:
45
+
46
+ ``` html
47
+ <a v-link =" { path: '/abc', replace: true }" ></a >
48
+ ```
49
+
50
+ - ** append**
51
+
52
+ 带有 ` append: true ` 选项的相对路径链接会确保该相对路径始终添加到当前路径之后。举例来说,从 ` /a ` 跳转到相对路径 ` b ` 时,如果没有 ` append: true ` 我们会跳转到 ` /b ` ,但有 ` append: true ` 则会跳转到 ` /a/b ` 。
31
53
32
- 链接活跃时的 class 名称可以通过在创建路由器实例时指定 ` activeLinkClass ` 来自定义。精确匹配时,后缀 ` -exact ` 会被添加到指定的 class 名称后。
54
+ ``` html
55
+ <a v-link =" { path: 'relative/path', append: true }" ></a >
56
+ ```
33
57
34
58
#### 其他注意点
35
59
Original file line number Diff line number Diff line change 38
38
39
39
- 默认值: ` "v-link-active" `
40
40
41
- 配置当 ` v-link ` 元素匹配的路径时需要添加到元素上的 class 。只要当前路径以 ` v-link ` 的 URL 开头,这个 class 就会被添加到这个元素上;当 ` v-link ` 的 URL 精确匹配当前路径时,以 ` -exact ` 额外的 class 会被添加到当前 ` v-link ` 元素上。默认的 class 是 ` v-link-active-exact ` 。如果你配置这个class为 ` my-custom-active ` ,当精确匹配时会被添加到元素上的 class 是 ` my-custom-active-exact ` 。
41
+ 配置当 ` v-link ` 元素匹配的路径时需要添加到元素上的 class 。只要当前路径以 ` v-link ` 的 URL 开头,这个 class 就会被添加到这个元素上。活跃匹配的规则和添加的 class 也可以通过 ` v-link ` 的内联选项单独指定 。
42
42
43
43
#### saveScrollPosition
44
44
Original file line number Diff line number Diff line change @@ -21,6 +21,10 @@ Vue-router 做路径匹配时支持动态片段、全匹配片段以及查询参
21
21
22
22
路由规则所属的路由器(以及其所属的组件)。
23
23
24
+ - ** $route.matched**
25
+
26
+ 数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
27
+
24
28
### 自定义字段
25
29
26
30
除了以上这些内置的属性外,在路由设置对象中的其他自定义字段也会被拷贝到最终的路由对象上。例如:
You can’t perform that action at this time.
0 commit comments