vue tabbar 如何利用嵌套路由 实现页面切换 以及记录高度 非history模式

项目中有时用到多个页面 记录滚动高度  让用户有更好的体验

利用路由实现 嵌套路由 监听高度 

项目源码 

<template>
    <div id="tabs" class="tabs">
        <div>{{active}}</div>
        <keep-alive>
            <router-view ></router-view>
        </keep-alive>
        <van-tabbar v-model="active">
            <van-tabbar-item  to="/tabs/tabs_list"   icon="home-o" >
                列表
                <van-icon
                slot="icon"
                slot-scope="props"
                :name="props.active  ? store_pes : store"
                ></van-icon>
            </van-tabbar-item>
            <van-tabbar-item  to="/tabs/tabs_user"  icon="search">用户
                <van-icon
                        slot="icon"
                        slot-scope="props"
                        :name="props.active  ? my_pes : my"
                ></van-icon>
            </van-tabbar-item>
        </van-tabbar>

    </div>
</template>

关键代码 <keep-alive> <router-view ></router-view> </keep-alive> 利用抽象组件缓存当前数据

嵌套路由配置
{
    name: 'tabs',
    component: () => import('./views/test/tabs'),
    path: '/tabs/tabs_list',
    children: [
        {
            name: 'tabs_list',
            component: () => import('./views/test/tabs_list'),
            path: '',
        },
        {
            name: 'tabs_user',
            component: () => import('./views/test/tabs_user'),
            path: '/tabs/tabs_user',
        }
    ]
}  ,

路由文件中进行高度监听

main.js 中声明
Vue.prototype.$pageScroll = {};//上个页面的滚动值

//route.js 
//高度放入数据中
router.beforeEach((to, from, next)=>{

    const title = to.meta.title ;
    let formName = from.name;
    //记录高度的路由名称 页面需求量不高的 可以用一下方法  这里也可以放入数组 也可以在 页面中进行此操作
    if(formName=='tabs_list'){
        let  scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(formName&&parseInt(scrollTop)>-1){
            console.log(scrollTop)
            router.app.$pageScroll[formName] = scrollTop;
        }
    }
    if(title){
        document.title = title;
    }
     if(to.name!='login'){
        if(state.state.token==''||state.state.token==undefined){
            next({path:'/login'});
        }
    }
    next();

});

//在scrollBehavior 行为函数中操作

const router =  new VueRouter({
    routes,
    scrollBehavior(to,form,savedPosition){
        //scrollBehavior方法接收to，form路由对象
        //第三个参数savedPosition当且仅当在浏览器前进后退按钮触发时才可用
        //该方法会返回滚动位置的对象信息，如果返回false，或者是一个空的对象，那么不会发生滚动
        //我们可以在该方法中设置返回值来指定页面的滚动位置，例如：
        //表示在用户切换路由时让是所有页面都返回到顶部位置
        //如果返回savedPosition,那么在点击后退按钮时就会表现的像原生浏览器一样，返回的页面会滚动过到之前按钮点击跳转的位置，大概写法如下：
        console.log(router.app.$pageScroll[to.name])
        if(savedPosition){
            console.log(savedPosition)
            return savedPosition
        }else{
            if(router.app.$pageScroll[to.name]>0){
                console.log('设定滚动高度')
                return {x:0,y:router.app.$pageScroll[to.name]}
            }
        }
        //如果想要模拟滚动到锚点的行为:
        if(to.hash){
            return {
                selector:to.hash
            }
        }
    }
})

自己研究的方法 大家有好方法可以互相交流  QQ邮箱：1012654345@qq.com