<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

    <transition>
      <router-view class="center"></router-view>
    </transition>

当然要想要实现过渡效果需要配合过渡的css类名

• v-enter:定义进入过渡的开始状态
• v-enter-active:定义进入活动状态
• v-enter-to:定义进入的结束状态
• v-leave:定义离开过渡的开始状态
• v-leave-active:定义离开的活动状态
• v-leave-to:定义离开的结束状态

看个示例：

<style>
.v-enter{
  opacity:0;
  .v-enter-to{
    opacity:1;
  .v-enter-active{
    transition:1s;
.v-leave{
  opacity:1;
.v-leave-to{
  opacity:0;
.v-leave-active{
  transition:2s;
</style>

结合官网上的示例图理解一下：

如果想要效果比较好的话还需要添加过渡的模式，一共有两种模式：out-in和in-out

out-in:前一个路由状态离开后再执行当前状态

in-out:当前点击状态进入后再执行前一个路由的离开状态

    <transition mode="out-in">
      <router-view class="center"></router-view>
    </transition>

如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用transition，并设置不同的name（此时设置css过渡类的时候，把v-,替换为各自的name-）如下示例：

    <transition  name="left">
      <router-view class="center"></router-view>
    </transition>

css设置：（有默认状态的可以省略哈）

 .left-enter{
    transform:translateX(100%);
.left-enter-active{
  transition:1s;
.left-leave-to{
  transform:translateX(-100%);
.left-leave-active{
  transition:1s;
路由的动态过渡：
 
还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：
 
    <transition  :name="names">
      <router-view class="center"></router-view>
    </transition>
 
vue中的设置：
 
<script>
export default {
  name: 'App',
  data(){
    return {
      index:'/',
      names:'left'
  watch:{
    $route(to,from){
      //目标导航下标和离开导航下标进行比较
     if(to.meta.index<from.meta.index){
       this.names = 'left';
     }else{
       this.names = 'right';
</script>
 
css过渡类：
 
.v-leave{
  opacity:1;
.v-leave-to{
  opacity:0;
.v-leave-active{
  transition:2s;
  .left-enter{
    transform:translateX(100%);
.left-enter-active{
  transition:1s;
.left-leave-to{
  transform:translateX(-100%);
.left-leave-active{
  transition:1s;
.right-enter{
  transform:translateX(-100%);
.right-enter-active{
  transition:1s;
.right-leave-to{
  transform:translateX(100%);
.right-leave-active{
  transition:1s;
ok，如果您还想要了解更多，可以参看官网哦：
 
https://cn.vuejs.org/v2/guide/transitions.html
 
https://router.vuejs.org/zh/guide/advanced/transitions.html
 
                    &amp;lt;router-view&amp;gt; 是基本的动态组件，所以我们可以用 &amp;lt;transition&amp;gt; 组件给它添加一些过渡效果：    &amp;lt;transition&amp;gt;      &amp;lt;router-view class=&quot;center&quot;&amp;gt;&amp;lt;/router-view&amp;gt;    &amp;lt;/transition&amp;gt;当然要想要实现过渡效果需要配合过渡
是否感觉使用element-ui-plus组件搭建的后台在router-view跳转页面的时候，内容部分出现的太过突兀？
不妨试试transition过渡
1、transition无法包裹router-view？
在Vue2的版本，如果想给router-view一个过渡渐变，可以将transition包裹在外面。
但是如今Vue3的版本，这样写会报错！
如何改善这种情况呢？
查询vue router官方文档发现可以这样写
<router-view 
				
vue router 过渡 威格 (VUEG)
just need to add Vue.use(vueg) ,vue-router will have a transition effect.
 只需添加Vue.use(vueg)，vue-router将具有过渡效果。 
View demo
查看演示 Download Source 
 用法 (Usage)
0、Installa...
				
不设置key
首先，vue会复用相同组件，对于路由有多个子路由来说，当在子路由来回切换时，会导致页面不刷新的问题，这是因为不再执行created和mounted这些钩子函数，可以通过watch来监听$route的变化从而加载不同的组件
通过设置key值为$route.path,因为子路由的path不同，从而避免了组件复用，子路由间来回切换时，页面都会重新加载.
遇到的问题
在后台系统中，点击侧导航菜单子菜单时，设置了:key="$route.path"会导致菜单关闭又打开，视觉效果不好，不设置key就实现
在这个 URL 中，query 参数是 `foo=bar` 和 `baz=qux`。
在 vue-router 中，可以通过 `$route.query` 来获取当前路由的 query 参数，例如：
```javascript
// 当前路由为 /path?foo=bar&baz=qux
console.log(this.$route.query.foo) // 输出：bar
console.log(this.$route.query.baz) // 输出：qux
params 则是通过 URL 中的路径参数传递参数的，例如：
http://example.com/path/:id
在这个 URL 中，`:id` 就是一个路径参数，可以通过不同的值来传递不同的参数。
在 vue-router 中，可以通过 `$route.params` 来获取当前路由的 params 参数，例如：
```javascript
// 当前路由为 /path/123
console.log(this.$route.params.id) // 输出：123
需要注意的是，params 参数只能在定义路由时指定，而且必须以冒号开头，例如：
```javascript
const router = new VueRouter({
  routes: [
      path: '/path/:id',
      component: MyComponent