vue中＜router-view＞使用详解

<router-view> 是 Vue Router 提供的一个用于动态显示匹配到的组件内容的组件。在单页面应用中，页面的切换是通过路由的变化来实现的，而 <router-view> 负责根据当前路由匹配到的组件渲染相应的内容。

下面是 <router-view> 的一些使用详解：

基本使用：

在主模板中使用 <router-view> 标签，它会根据当前路由的匹配情况动态渲染对应的组件。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // 组件的其他配置
};
</script>

嵌套路由：

<router-view> 可以嵌套使用，以支持嵌套路由的场景。在父组件中使用多个 <router-view> 标签，每个标签对应一个具体的嵌套路由。

<template>
  <div>
    <header>Header</header>
    <router-view></router-view>
    <footer>Footer</footer>
  </div>
</template>

命名视图：

使用 <router-view> 标签时，你还可以为其指定 name 属性，从而支持命名视图，这在同时展示多个视图的情况下很有用。

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

在路由配置中，对应的路由定义也需要添加 components 字段：

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

动态组件：

<router-view> 也支持渲染动态组件。你可以通过在路由配置中使用 component 字段，将组件与路由进行关联。

const routes = [
  {
    path: '/dynamic',
    component: () => import('./DynamicComponent.vue')
  }
];

在模板中：

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

过渡效果：?

如果你希望在切换路由时添加过渡效果，可以在 <router-view> 外层包裹 <transition> 标签。

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在上述例子中，路由切换时会产生淡入淡出的过渡效果。

这些是 <router-view> 的一些基本用法和高级特性。在 Vue Router 中，<router-view> 是实现动态路由渲染的核心组件，通过合理配置路由和使用 <router-view>，你可以构建出强大且灵活的单页面应用。