You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
+
## 链接在什么时候匹配当前路由
8
8
9
-
## When are links active?
9
+
当满足以下条件时,RouterLink 被认为是**匹配当前路由的**:
10
10
11
-
A RouterLink is considered to be ***active*** if:
11
+
1. 它与当前路径匹配相同的路由记录(即配置的路由)。
12
+
2. 它的 `params` 与当前路径的 `params` 相同。
12
13
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.
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`.
If a route has a [`redirect`](./redirect-and-alias#Redirect), it won't be followed when checking whether a link is active.
22
+
## 精确匹配当前路由的链接
23
23
24
-
## Exact active links
24
+
**精确**匹配不包括祖先路由。
25
25
26
-
An ***exact*** match does not include ancestor routes.
27
-
28
-
Let's imagine we have the following routes:
26
+
假设我们有以下路由:
29
27
30
28
```js
31
29
constroutes= [
@@ -42,7 +40,7 @@ const routes = [
42
40
]
43
41
```
44
42
45
-
Then consider these two links:
43
+
然后考虑这两个链接:
46
44
47
45
```vue-html
48
46
<RouterLink to="/user/erina">
@@ -53,11 +51,11 @@ Then consider these two links:
53
51
</RouterLink>
54
52
```
55
53
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`.
0 commit comments