vue-router命名视图：让两个router-view有不同的动画效果

问题以及解决

先看一下官方对于命名路由的解释：

命名路由：https://router.vuejs.org/zh/guide/essentials/named-routes.html

命名视图：https://router.vuejs.org/zh/guide/essentials/named-views.html

比如我目前的页面中，想要不同的路由实现不同的效果，如果使用同一个路由，那么他们都会使用相同的过度动画。比如这样：

<router-view v-slot="{ Component }"
  >
    <transition appear name="slide">
      <component :is="Component"></component>
    </transition>
</router-view>

只要我使用一级路由，都会使用slide动画。但是，又有一些路由，我并不想使用过度动画，那么该如何区分他们呢？

比如我有以下基本路由设置：

import { createRouter, createWebHashHistory } from 'vue-router'
import Recommend from '@/views/recommend'
import Album from '@/views/album'

import UserCenter from '@/views/user-center'

// 路由配置
const routes = [
  // 配置当访问根路径/的时候，跳转到/recommend的路径 渲染Recommend组件
  {
    path: '/',
    redirect: '/recommend'
  },
  {
    path: '/recommend',
    component: Recommend,
    children: [
      {
        path: ':id',
        component: Album
      }
    ]
  },
  {
    path: '/user',
    component: UserCenter
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

现在我想要在切换到/user路由时候显示动画，而其他路由切换的时候不需要动画。

这里我们先说一个知识点：

 {
    path: '/user',
    component: UserCenter
  }

与下面是相同的：

components: {
   default: UserCenter
}

而router-view上，实际上的name就是default

<router-view name="default"></>

所以当我们要让路由使用不同动画的时候，我们可以这样修改：

首先修改/user路由设置：

{
    path: '/user',
    // 这样就区分默认路由无动画，而指定的路由有动画
    components: {
     // 这里的user是<router-view name="user">与name属性相对应
     user: UserCenter
    }
}

然后在app.vue中，使用两个router-view，如下：

<!-- 一级路由 不设置name属性 name=default 的路由在这里显示 -->
<router-view></router-view>

<!-- 使用router的命名路由 将/user路由与其他路由分开 此路由使用动画 -->
  <router-view v-slot="{ Component }"
               name="user"
  >
    <transition appear name="slide">
      <component :is="Component"></component>
    </transition>
</router-view>