Skip to content

Commit 42453b4

Browse files
📃 docs(zh): Updated active-links.md (#2459)
* 📃 docs(zh): Updated active-links.md * 📃 docs(zh): Updated active-links.md * Update active-links.md --------- Co-authored-by: Jinjiang <[email protected]>
1 parent baf881f commit 42453b4

File tree

1 file changed

+20
-22
lines changed

1 file changed

+20
-22
lines changed
Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
1-
<!-- TODO: translation -->
1+
# 匹配当前路由的链接
22

3-
# Active links
3+
应用程序通常都会有一个渲染 RouterLink 列表的导航组件。我们也许想对这个列表中匹配当前路由的链接进行视觉区分。
44

5-
It's common for applications to have a navigation component that renders a list of RouterLink components. Within that list, we might want to style links to the currently active route differently from the others.
5+
RouterLink 组件会为匹配当前路由的链接添加两个 CSS 类,`router-link-active``router-link-exact-active`。要理解它们之间的区别,我们首先需要了解 Vue Router 如何判断一个链接是**匹配当前路由的**
66

7-
The RouterLink component adds two CSS classes to active links, `router-link-active` and `router-link-exact-active`. To understand the difference between them, we first need to consider how Vue Router decides that a link is _active_.
7+
## 链接在什么时候匹配当前路由
88

9-
## When are links active?
9+
当满足以下条件时,RouterLink 被认为是**匹配当前路由的**
1010

11-
A RouterLink is considered to be ***active*** if:
11+
1. 它与当前路径匹配相同的路由记录(即配置的路由)。
12+
2. 它的 `params` 与当前路径的 `params` 相同。
1213

13-
1. It matches the same route record (i.e. configured route) as the current location.
14-
2. It has the same values for the `params` as the current location.
14+
如果你使用了[嵌套路由](./nested-routes),任何指向祖先路由的链接也会被认为是匹配当前路由的,只要相关的 `params` 匹配。
1515

16-
If you're using [nested routes](./nested-routes), any links to ancestor routes will also be considered active if the relevant `params` match.
16+
其他路由属性,例如 [`query`](../../api/interfaces/RouteLocationNormalized#query),不会被考虑在内。
1717

18-
Other route properties, such as the [`query`](../../api/interfaces/RouteLocationNormalized#query), are not taken into account.
18+
路径不一定需要完全匹配。例如,使用 [`alias`](./redirect-and-alias#Alias) 仍然会被认为是匹配的,只要它解析到相同的路由记录和 `params`
1919

20-
The path doesn't necessarily need to be a perfect match. For example, using an [`alias`](./redirect-and-alias#Alias) would still be considered a match, so long as it resolves to the same route record and `params`.
20+
如果一个路由有 [`redirect`](./redirect-and-alias#Redirect),在检查链接是否匹配当前路由时不会跟随重定向。
2121

22-
If a route has a [`redirect`](./redirect-and-alias#Redirect), it won't be followed when checking whether a link is active.
22+
## 精确匹配当前路由的链接
2323

24-
## Exact active links
24+
**精确**匹配不包括祖先路由。
2525

26-
An ***exact*** match does not include ancestor routes.
27-
28-
Let's imagine we have the following routes:
26+
假设我们有以下路由:
2927

3028
```js
3129
const routes = [
@@ -42,7 +40,7 @@ const routes = [
4240
]
4341
```
4442

45-
Then consider these two links:
43+
然后考虑这两个链接:
4644

4745
```vue-html
4846
<RouterLink to="/user/erina">
@@ -53,11 +51,11 @@ Then consider these two links:
5351
</RouterLink>
5452
```
5553

56-
If the current location path is `/user/erina/role/admin` then these would both be considered _active_, so the class `router-link-active` would be applied to both links. But only the second link would be considered _exact_, so only that second link would have the class `router-link-exact-active`.
54+
如果当前路径是 `/user/erina/role/admin`,那么这两个链接都会被认为是**匹配当前路由的**,因此 `router-link-active` 类会应用于这两个链接。但只有第二个链接会被认为是**精确的**,因此只有第二个链接会有 `router-link-exact-active` 类。
5755

58-
## Configuring the classes
56+
## 配置类名
5957

60-
The RouterLink component has two props, `activeClass` and `exactActiveClass`, that can be used to change the names of the classes that are applied:
58+
RouterLink 组件有两个属性,`activeClass` `exactActiveClass`,可以用来更改应用的类名:
6159

6260
```vue-html
6361
<RouterLink
@@ -67,7 +65,7 @@ The RouterLink component has two props, `activeClass` and `exactActiveClass`, th
6765
>
6866
```
6967

70-
The default class names can also be changed globally by passing the `linkActiveClass` and `linkExactActiveClass` options to `createRouter()`:
68+
默认的类名也可以通过传递 `linkActiveClass` `linkExactActiveClass` 选项给 `createRouter()` 来全局更改:
7169

7270
```js
7371
const router = createRouter({
@@ -77,4 +75,4 @@ const router = createRouter({
7775
})
7876
```
7977

80-
See [Extending RouterLink](../advanced/extending-router-link) for more advanced customization techniques using the `v-slot` API.
78+
参见[扩展 RouterLink](../advanced/extending-router-link) 以获取使用 `v-slot` API 进行更高级自定义的技术。

0 commit comments

Comments
 (0)