vue router-view路由详解

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便地在单页应用中管理应用的路由。

在使用 Vue Router 进行路由管理时，我们需要用到它的一个重要组件 router-view。router-view 可以理解为路由的容器，用于显示当前路由对应的组件。

下面我们来详细介绍一下 router-view 的使用方式和相关属性。

### 基本用法

在 Vue Router 中使用 router-view 很简单，只需要在需要展示路由组件的地方加上 <router-view></router-view> 标签即可。

例如，我们有一个路由配置如下：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

在需要展示路由组件的地方添加 <router-view></router-view> 标签：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

这样，当路由为 '/' 时，会显示 Home 组件；当路由为 '/about' 时，会显示 About 组件。

### 嵌套路由

在 Vue Router 中，我们可以使用嵌套路由来实现复杂的路由配置。当我们需要在一个父路由下展示多个子路由时，可以使用嵌套路由。

例如，我们有一个父路由 '/user'，下面有两个子路由 '/user/profile' 和 '/user/settings'，路由配置如下：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

在 User 组件中，我们需要使用 router-view 来展示子路由对应的组件：

<template>
  <div>
    <h1>User Page</h1>
    <router-view></router-view>
  </div>
</template>

这样，当路由为 '/user/profile' 时，会显示 Profile 组件；当路由为 '/user/settings' 时，会显示 Settings 组件。

### 路由命名视图

在某些情况下，我们需要在同一个页面中展示多个路由组件。此时，我们可以使用路由命名视图来实现。

路由命名视图是一种特殊的 router-view，它可以指定路由组件的渲染位置。

例如，我们有一个路由配置如下：

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      header: Header,
      footer: Footer
    }
  }
]

这里我们通过 components 属性来指定每个路由命名视图对应的组件。default 表示默认的视图，也就是没有指定名字的视图。

在需要展示路由组件的地方，我们需要使用 router-view 的 name 属性来指定命名视图的名称：

<template>
  <div>
    <router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

这样，我们就可以在同一个页面中展示多个路由组件了。

### 路由过渡动画

在 Vue Router 中，可以通过 transition 组件来给路由切换添加过渡动画。

首先，我们需要在 App.vue 中添加 transition 组件：

<template>
  <div>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

这里我们使用 name 属性来指定过渡动画的名称，fade 是一个自定义的名称。

接下来，我们需要在 CSS 中定义过渡动画：

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

这里我们使用 opacity 属性来控制元素的透明度，当元素进入或离开时，会触发过渡动画。

至此，我们已经介绍了 router-view 的基本用法、嵌套路由、路由命名视图和路由过渡动画。希望对你有所帮助！