vue路由管理－保留滚动位置功能、按需加载模块名自定义

路由管理：保留滚动位置

其实现与组件的keep-alive相关，仅设置了keep-aive的页面，实施保留回退位置能力。

keep-alive介绍

作用

把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染，提升切换性能。

相关的生命周期

created() {
console.log('created')
},
activated() {
console.log('activated')
},
deactivated() {
console.log('deactivated')
},
mounted() {
console.log('mounted')
}

执行结果

首次执行该keep-alive组件：

进入：created-> mounted-> activated

离开：deactivated

第二次执行该keep-alive组件：

进入：activated

离开：deactivated

对于没有设置keep-alive的组件：

进入：created-> mounted

离开：空

activated和deactivated为keep-alive组件特有的生命周期，有什么作用呢？

由于keep-alive对单页路由生效，不论是后退操作，还是跳转操作，当非首次访问组件时，mounted、created不执行，其中的数据请求也不会发起，所以，其数据不会进行相应更新。这种设定，符合回退操作的数据状态，但对于大多数的单页跳转操作，会出现数据问题。此时，可利用ativated，发起数据请求，更新数据状态。由于是数据驱动的视图，所以，在数据请求到达前，组件使用旧的数据状态，仍然能给用户不错的视觉体验（不会出现白屏之类的）。

保留滚动位置功能的实现方法

vue-router中有提供scrollBehavior方法，设置回退位置。但由于本项目中vue的基础布局限制，使得scroll在window or document中无效，因此需要自定义方法。

相关条件

仅用户进行回退操作，且设置了router为keep-alive属性的方法，才可进行实际的回退。

思路

a、确认回退操作：通过判断scrollBehavior的savedPosition是否存在；

b、是否为keep-alive的组件：通过router上的meta.keepAlive属性判断;

c、获取页面离开时的位置：beforeEach钩子（该钩子的生命周期：离开前页面，进入下一页面前）

实现代码

// app.vue
<div class='view-frame'>
<keep-alive>
<router-view class="view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view class="view" v-if="!$route.meta.keepAlive"></router-view>
</div>

//  router.js
let routerList = [{
...
meta: {
keepAlive: true
}
}]

const router = new VueRouter({
mode: 'history',
...
// 设置返回对应位置的操作
scrollBehavior(to, from, savedPosition) {
if (savedPosition && to.meta.keepAlive) {
let scrollTop = store.state.common.scrollPos[to.name] || 0
if (!scrollTop) {
return
}
// 对scroll元素进行设置
setTimeout(() => {
let documentElem = document.querySelector('.v-content')
if (documentElem) {
documentElem.scrollTop = scrollTop
}
}, 0)
}
}
})

router.beforeEach((to, from, next) => {
// 记录上一个页面的scroll位置
if (from.name) {
let contentElem = document.querySelector('.v-content')
let scrollTop = contentElem ? contentElem.scrollTop : '0'
store.state.common.scrollPos[from.name] = scrollTop
}
next(
})

按需加载的优化，提升缓存性能

了解webpack打包配置的童鞋都知道，webpack提供模块方法，实现按需加载的功能，使得单页应用的首屏性能更高。但打包的方法，常常会影响浏览器缓存，当访问一个资源时，如果其已经加载过，将缓存下来，再次访问时，只需从缓存中取，从而省去了再次请求的时间。因此，有效的打包策略应如是：当文件没有改动时，保持其文件名不变。

webpack提供两种打包方式

a、require()：将按照webpack的打包id，进行命名；

b、require.ensure()：可自定义打包名。

方法1:

优点：打包名不会重复；

缺点：其打包名受包的前后顺序，数量影响，即使文件没发生变化，也可能改变包名.

方法2:

优点：仅内容变化才改变包名；便于调试、错误跟踪；可读性强;

中性点：可能出现打包名重复，从而使得两个模块打包到一个文件当中。

第二种方式更佳，相关代码如下：

// webpack.js
output: {
....
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
}

// router.js
const home = r => require.ensure([], () => r(require('src/views/home')), 'home')
let routerList = [{
...
component: home
}]

如此，会出现包合并的问题，因此需要根据路由模块，对包名进行管理。

＊＊＊＊＊＊更新＊＊＊＊＊＊＊

打包名的命名第三种方式，采用ES6的import实现，需要进行对应的设置：

step1：.babelrc文件，删除“comments”配置;如图：



step2: 如果有eslint检测，则需要在eslint中增加配置；如图：



step3：修改包的加载方式（require.ensure => import）:

将 const home = r => require.ensure([], () => r(require('src/views/home')), 'home')

替换成：const home = () => import(/* webpackChunkName: 'home' */ 'src/views/home')

/* webpackChunkName: 'home' */可实现自定义包名，如果不需要自定义，可将该注释删除。