vue路由缓存问题及混合开发路由控制问题

问题描述（vue）：

1、在移动端项目中，使用了vux框架，在客户界面有三个分类，包括经销商、企业、家庭用户，三个分类均可下拉滚动加载操作，点击分类即切换查询条件，当我们切换到经销商，滚动加载到下一页后，点击某个经销商，跳转到某个界面后，点击返回，发现该客户界面被刷新了，用户无法返回点击某个经销商之前的数据状态。

2、移动端为微信公众号项目，需要为安卓和iOS提供部分设备详情界面，调用方式为: https:xx.xxx.com/#/xxx?item=xxx，在路由控制守卫中已经拦截掉未登录用户，若发现该用户未登录，则跳转到登录界面。

解决问题：

1、针对第一个问题，采用路由缓存来解决，但只针对特别几个界面缓存，而不是全部。
主要使用vue的keep-alive组件，具体实现如下：

//App.vue,根据router配置来判断是否缓存该路由
<div id="app">
    <router-view v-if="!$route.meta.keepAlive"/>
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
</div>

//router/index.js，路由配置文件
{
    path: 'dCustomerPage',
    name: '客户管理',
    component: dCustomerPage,
    meta:{
        keepAlive: true,
    }
},

2、第二个问题主要是路由控制，通过路由配置，来判断是否可以被外部访问，只有meta中配置了为allowEA为true时，可以直接访问，其他路由需要登录后彩壳访问。

//main.js，路由守卫方法，进入时判断
else if(to.meta && to.meta.allowEA == true){
    next();
}else{
    next('/')
}

//router/index.js，配置路由文件
{
    path: '/outEquitDetail',
    name:'outEquitDetail',
    component: outEquitDetail,
    meta:{
        allowEA: true
    }
},

其他问题

1、通过内置浏览器判断移动设备类型

var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            //在微信中打开
            
        }
        if (ua.indexOf('iphone')>0) {
            //是否在IOS浏览器打开
            
        }if(ua.indexOf('android')>0){
            //是否在安卓浏览器打开
            
        }else {
            //其他
            
        }

2、vux组件–>scroller，滚动后切换导致部分界面看不到

//scroller为scroller组件绑定的ref的值，reset方法的参数不能省略
this.$nextTick(()=>{
    this.$refs.scroller.reset({top:0})
})