关于对vue-router的优化(详尽版)

这两天总结了关于vue-router优化的几点技法，做个笔记

在基于vue的移动端app中，通过vue-router可以便捷的进入某一路由或回退到上一路由，但是若不对vue-router做相关优化处理，则会造成以下几个问题：

1.切换路由时，频繁向后台发送请求

2.切换路由时，页面会卡顿，影响用户体验

问题1：切换路由时，频繁向后台发送请求,以及解决办法

关于对vue-router的优化(详尽版)-LMLPHP

萌新们往往会将所有的路由一股脑的与根路由配置在同一级，但事实证明，这是不可取的。

关于对vue-router的优化(详尽版)-LMLPHP

所以原因就在于此：

那么，保持组件的状态，便是解决的方法：

解决方法一：使用vue内置组件keep-alive保持组件状态

<template>
//App.vue
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

尝试举个例子来解释这句话：

所以，这个方法是不可取的

解决办法二：更改router的配置

//router/index.js
{
    path: '/',
    name: 'Home',
    component: Home,
    // 根目录的子路由，优化路由，防止每次回退或进入都会加载
    //home路由的子路由放置在自身的children路由下
    children: [
      {
        path : '/playListView',
        name:'PlayListView',
        component:() => import(/* webpackChunkName: "about" */ '../views/playListView.vue'),
        children:[
            //子路由的子路由放置在自己的children下，以此类推
          {
            path : ':id',//传入id值，指明是哪一个playlist
            name:'PlayListViewInfo',
            component:() => import('../views/playListInfo.vue')
          }
        ]
      }
    ]
  }

如果使用了该方法，则还需要给home下每一个后代路由添加router-view标签，用以标识该路由是home根路由的后代路由

举个栗子：

<template>
<!--  歌单视图  歌单详情页-->
  <div class="page">
  <div>
    <m-header>
      全部歌单
    </m-header>
    <div class="play-wrapper">
      <play-list :data="playListData" @clickItem = 'gotoPlayListInfo '></play-list>
    </div>
  </div>
      <router-view/> <!-- 该路由组件上的router-view标签标识它的子路由-->
</div>
</template>

解决办法：(提高后代组件的层级，使后代组件可以覆盖父组件) 在home的所有后代路由的根div上添加一个叫page的class:

/* app的公共样式common.js */
.page{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:#f3f4f9 ; /*与html背景色保持一致*/
    z-index: 9999; /*使用最高层级，覆盖home组件的层级*/
    overflow: scroll;/*在移动端中使滚动可用*/
}

而以上操作完成后，就可以发现，点击进入路由时，会发送一个网络请求，而回退到上一路由时，则不会发起请求，且页面正常显示；且就算进入了一个动态路由也可以正常显示

这样，就解决了切换路由时，频繁向后台发送请求的问题。

问题2：进入某一路由或回退到上一路由时，页面会有生硬的进入显示现象，影响用户体验

<template>
  <div class="page">
  <div>
    <m-header >全部歌手</m-header>
    <artist-list :data="artistsData"
      @clickItem="gotoArtistsInfo"
      class="artist"></artist-list>
  </div>
  <transition name="slide"><!--👈使用name属性定制组件过渡样式-->
    <router-view/>   <!--👈使用transition包裹组件内的路由-->
  </transition>
  </div>
</template>

然后在app公共样式里写对应过渡样式：

/*common.js*/
/*等待过程中的动画*/
.slide-enter-active,.slide-leave-active{
    transition: all .3s;
}
.slide-enter,.slide-leave-to{
    transform: translate3d(100%,0,0);
}

这样，便解决了页面生硬卡顿问题。

以上。

致爱丽丝