Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions packages/docs/zh/guide/advanced/composition-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default {

## `useLink`

Vue Router 将 RouterLink 的内部行为作为一个组合式 API 函数公开。它提供了与 [`v-slot` API](../../api/#router-link-s-v-slot) 相同的访问属性
Vue Router 将 RouterLink 的内部行为作为一个组合式函数 (composable) 公开。它接收一个类似 `RouterLink` 所有 prop 的响应式对象,并暴露底层属性来构建你自己的 `RouterLink` 组件或生成自定义链接

```js
import { RouterLink, useLink } from 'vue-router'
Expand All @@ -107,7 +107,18 @@ export default {
},

setup(props) {
const { route, href, isActive, isExactActive, navigate } = useLink(props)
const {
// 解析出来的路由对象
route,
// 用在链接里的 href
href,
// 布尔类型的 ref 标识链接是否为激活的
isActive,
// 布尔类型的 ref 标识链接是否为严格活跃的
isExactActive,
// 导航至该链接的函数
navigate
} = useLink(props)

const isExternalLink = computed(
() => typeof props.to === 'string' && props.to.startsWith('http')
Expand All @@ -117,3 +128,5 @@ export default {
},
}
```

注意在 RouterLink 的 `v-slot` 中可以访问与 `useLink` 组合式函数相同的属性。
11 changes: 9 additions & 2 deletions packages/docs/zh/guide/advanced/dynamic-routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,23 +59,30 @@ router.beforeEach(to => {
有几个不同的方法来删除现有的路由:

- 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:

```js
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
```

- 通过调用 `router.addRoute()` 返回的回调:

```js
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
```

当路由没有名称时,这很有用。

- 通过使用 `router.removeRoute()` 按名称删除路由:

```js
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
```

需要注意的是,如果你想使用这个功能,但又想避免名字的冲突,可以在路由中使用 `Symbol` 作为名字。

当路由被删除时,**所有的别名和子路由也会被同时删除**
Expand Down Expand Up @@ -104,5 +111,5 @@ router.addRoute({

Vue Router 提供了两个功能来查看现有的路由:

- [`router.hasRoute()`](../../api/#hasroute):检查路由是否存在。
- [`router.getRoutes()`](../../api/#getroutes):获取一个包含所有路由记录的数组。
- [`router.hasRoute()`](../../api/interfaces/Router.md#Methods-hasRoute):检查路由是否存在。
- [`router.getRoutes()`](../../api/interfaces/Router.md#Methods-getRoutes):获取一个包含所有路由记录的数组。
2 changes: 1 addition & 1 deletion packages/docs/zh/guide/essentials/history-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const router = createRouter({

## 服务器配置示例

**注意**:以下示例假定你正在从根目录提供服务。如果你部署到子目录,你应该使用[Vue CLI 的 `publicPath` 配置](https://cli.vuejs.org/config/#publicpath)和相关的[路由器的 `base` 属性](../../api/#createwebhistory)。你还需要调整下面的例子,以使用子目录而不是根目录(例如,将`RewriteBase/` 替换为 `RewriteBase/name-of-your-subfolder/`)。
**注意**:以下示例假定你正在从根目录提供服务。如果你部署到子目录,你应该使用[Vue CLI 的 `publicPath` 配置](https://cli.vuejs.org/config/#publicpath)和相关的[路由器的 `base` 属性](../../api/#Functions-createWebHistory)。你还需要调整下面的例子,以使用子目录而不是根目录(例如,将`RewriteBase/` 替换为 `RewriteBase/name-of-your-subfolder/`)。

### Apache

Expand Down
6 changes: 3 additions & 3 deletions packages/docs/zh/guide/migration/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ app.config.globalProperties.append = (path, pathToAppend) =>

### 删除 `router.match` 改为 `router.resolve`

`router.match` 和 `router.resolve` 已合并到 `router.resolve` 中,签名略有不同。[详见 API](/api/interfaces/Router#Methods-resolve)。
`router.match` 和 `router.resolve` 已合并到 `router.resolve` 中,签名略有不同。[详见 API](/zh/api/interfaces/Router#Methods-resolve)。

**原因**:将用于同一目的的多种方法统一起来。

Expand Down Expand Up @@ -414,10 +414,10 @@ const routes = [

<!-- TODO: translate chinese API entries -->

给定任何[规范化的路由地址](/api/interfaces/RouteLocationNormalized.md):
给定任何[规范化的路由地址](/zh/api/interfaces/RouteLocationNormalized.md):

- `path`, `fullPath`中的值不再被解码了。例如,直接在地址栏上写 "<https://example.com/hello> world",将得到编码后的版本:"https://example.com/hello%20world",而 "path "和 "fullPath "都是"/hello%20world"。
- `hash` 现在被解码了,这样就可以复制过来。`router.push({ hash: $route.hash })` 可以直接用于 [scrollBehavior](/api/interfaces/RouterOptions.md#Properties-scrollBehavior) 的 `el` 配置中。
- `hash` 现在被解码了,这样就可以复制过来。`router.push({ hash: $route.hash })` 可以直接用于 [scrollBehavior](/zh/api/interfaces/RouterOptions.md#Properties-scrollBehavior) 的 `el` 配置中。
- 当使用 `push`、`resolve` 和 `replace` 并在对象中提供 `string` 地址或 `path` 属性时,**必须进行编码**(像以前的版本一样)。另一方面,`params`、`query` 和 `hash` 必须以未编码的版本提供。
- 斜线字符(`/`)现在已在 `params` 内正确解码,同时仍在 URL 上产生一个编码版本:`%2F`。

Expand Down