In order to use transitions on your route components and animate navigations, you need to use the [`<RouterView>` slot](./router-view-slot):
-```html
+```vue-html
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
]
```
-```html
+```vue-html
<router-view v-slot="{ Component, route }">
<!-- Use any custom transition and to `fade` -->
<transition :name="route.meta.transition || 'fade'">
It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route. Using a very similar snippet to the one just before:
-```html
+```vue-html
<!-- use a dynamic transition name -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition">
Vue might automatically reuse components that look alike, avoiding any transition. Fortunately, it is possible [to add a `key` attribute](https://vuejs.org/api/built-in-special-attributes.html#key) to force transitions. This also allows you to trigger transitions while staying on the same route with different params:
-```vue
+```vue-html
<router-view v-slot="{ Component, route }">
<transition name="fade">
<component :is="Component" :key="route.path" />
To link to a named route, you can pass an object to the `router-link` component's `to` prop:
-```html
+```vue-html
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link>
Sometimes you need to display multiple views at the same time instead of nesting them, e.g. creating a layout with a `sidebar` view and a `main` view. This is where named views come in handy. Instead of having one single outlet in your view, you can have multiple and give each of them a name. A `router-view` without a name will be given `default` as its name.
-```html
+```vue-html
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>
The `<template>` section for `UserSettings` component in the above layout would look something like this:
-```html
+```vue-html
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
`transition` and `keep-alive` must now be used **inside** of `RouterView` via the `v-slot` API:
-```vue
+```vue-html
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
The `append` prop has been removed from `<router-link>`. You can manually concatenate the value to an existing `path` instead:
-```html
+```vue-html
replace
<router-link to="child-route" append>to relative child</router-link>
with
Both `event`, and `tag` props have been removed from `<router-link>`. You can use the [`v-slot` API](/guide/advanced/composition-api#uselink) to fully customize `<router-link>`:
-```html
+```vue-html
replace
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
with
Before you could directly pass a template to be rendered by a route components' `<slot>` by nesting it under a `<router-view>` component:
-```html
+```vue-html
<router-view>
<p>In Vue Router 3, I render inside the route component</p>
</router-view>
Because of the introduction of the `v-slot` api for `<router-view>`, you must pass it to the `<component>` using the `v-slot` API:
-```html
+```vue-html
<router-view v-slot="{ Component }">
<component :is="Component">
<p>In Vue Router 3, I render inside the route component</p>
想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 [v-slot API](/guide/advanced/composition-api#uselink)：
-```html
+```vue-html
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
]
```
-```html
+```vue-html
<router-view v-slot="{ Component, route }">
<!-- 使用任何自定义过渡和回退到 `fade` -->
<transition :name="route.meta.transition || 'fade'">
也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：
-```html
+```vue-html
<!-- 使用动态过渡名称 -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition">
Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡。幸运的是，可以[添加一个 `key` 属性](https://cn.vuejs.org/api/built-in-special-attributes.html#key)来强制过渡。这也允许你在相同路由上使用不同的参数触发过渡：
-```vue
+```vue-html
<router-view v-slot="{ Component, route }">
<transition name="fade">
<component :is="Component" :key="route.path" />
要链接到一个命名的路由，可以向 `router-link` 组件的 `to` 属性传递一个对象：
-```html
+```vue-html
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
User
</router-link>
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 `sidebar` (侧导航) 和 `main` (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 `router-view` 没有设置名字，那么默认为 `default`。
-```html
+```vue-html
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>
`UserSettings` 组件的 `<template>` 部分应该是类似下面的这段代码:
-```html
+```vue-html
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
`transition` 和 `keep-alive` 现在必须通过 `v-slot` API 在 `RouterView` **内部**使用：
-```vue
+```vue-html
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
`<router-link>` 中的 `append` 属性已被删除。你可以手动将值设置到现有的 `path` 中：
-```html
+```vue-html
将
<router-link to="child-route" append>to relative child</router-link>
替换成
`<router-link>` 中的 `event` 和 `tag` 属性都已被删除。你可以使用 [`v-slot` API](/zh/guide/advanced/composition-api#uselink) 来完全定制 `<router-link>`：
-```html
+```vue-html
将
<router-link to="/about" tag="span" event="dblclick">About Us</router-link>
替换成
之前你可以直接传递一个模板，通过嵌套在 `<router-view>` 组件下，由路由组件的 `<slot>` 来渲染：
-```html
+```vue-html
<router-view>
<p>In Vue Router 3, I render inside the route component</p>
</router-view>
由于 `<router-view>` 引入了 `v-slot` API，你必须使用 `v-slot` API 将其传递给 `<component>`：
-```html
+```vue-html
<router-view v-slot="{ Component }">
<component :is="Component">
<p>In Vue Router 3, I render inside the route component</p>
projects / thirdparty / vuejs / router.git / commitdiff
