## `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'
},
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')
},
}
```
+
+注意在 RouterLink 的 `v-slot` 中可以访问与 `useLink` 组合式函数相同的属性。
有几个不同的方法来删除现有的路由:
- 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:
+
```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` 作为名字。
当路由被删除时,**所有的别名和子路由也会被同时删除**
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):获取一个包含所有路由记录的数组。
## 服务器配置示例
-**注意**:以下示例假定你正在从根目录提供服务。如果你部署到子目录,你应该使用[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
### 删除 `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)。
**原因**:将用于同一目的的多种方法统一起来。
<!-- 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`。