第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Message from '@/components/Message'
import Search from '@/components/Search'
import Home from '@/components/bottomBar/Home'
import Person from '@/components/bottomBar/Person'
import Release from '@/components/bottomBar/Release'
import Collection from '@/components/bottomBar/Collection'Vue.use(Router);
const  routes =[{path: '/',name: 'HelloWorld',component: HelloWorld,children: [{path:'home',component:Home,meta: {title: 'home',keepAlive: true}},{path:'person',component:Person},{path:'release',component:Release},{path:'collection',component:Collection}]},{path:"/message",component:Message},{path:"/search",component:Search}];
const router = new Router({routes,
});export default router

第二步:router-view的设置

<template><div id="index"><keep-alive ><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view><van-tabbar v-model="active"><van-tabbar-item icon="home" to="/home">首页</van-tabbar-item><van-tabbar-item icon="records" to="/release">发布</van-tabbar-item><van-tabbar-item icon="idcard"  to="/collection">收藏</van-tabbar-item><van-tabbar-item icon="contact"  to="/person" :dot="true">个人中心</van-tabbar-item></van-tabbar></div>
</template><script>
export default {data () {return {value:"",active:0}},mounted(){this.$router.push("/home")},methods:{}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">#index{.van-tabbar{height: 1.1rem;border-top: 1px solid #eee;.van-tabbar-item--active{color: orange;}.van-tabbar-item__icon{font-size: 0.5rem;.van-info{padding: 0.05rem 0.1rem;line-height: 0.3rem;right:-0.1rem;}}}}
</style>

第三步:在你需要保存位置的vue文件里面进行操作

<template><div class="htmlGlobal"><div id="home"><van-row><van-col span="2"  id="message" @click.native="goToMessageHtml"><van-icon name="chat" :class="{'dot':true}"/></van-col><van-col span="20" id="search"><van-searchplaceholder="搜你感兴趣的"v-model="value"background="orange"@focus="goToSearchHtml"/></van-col><van-col span="2"></van-col></van-row></div><div id="noticeBar"><van-notice-bar mode="closeable":text=noticeValueleft-icon="http://img.yzcdn.cn/vant/volume.png"/></div><div id="vanSwipe"><van-swipe :autoplay="3000" indicator-color="orange"><van-swipe-item>1</van-swipe-item><van-swipe-item>2</van-swipe-item><van-swipe-item>3</van-swipe-item><van-swipe-item>4</van-swipe-item></van-swipe></div><div id="vanTabs" ><van-tabs swipeable v-model="tabActive" :class="{'fixed':fixed}"><van-tab v-for="(item,index) in tabsArr" :title="item.name" :key="index"></van-tab></van-tabs><ShopList :index="tabActive"></ShopList></div></div>
</template><script>import ShopList from '../ShopList'export default {beforeRouteLeave(to, from, next){this.$store.commit("set_scrollTop",this.scroll);next();},activated () {this.$nextTick(function(){let position = this.$store.state.scrollTop; //返回页面取出来window.scrollTo(0, position);})},components:{ShopList},data(){return{scroll:0,fixed:false,value:'',//二手物品的分类信息tabsArr:[{name:"书籍",requestCode:"0",},{name:"生活百货",requestCode:"1",},{name:"乐器",requestCode:"2",},{name:"数码",requestCode:"3",},{name:"服饰鞋包",requestCode:"4",},{name:"美妆捡漏",requestCode:"5",},{name:"运动户外",requestCode:"6",},{name:"健身器材",requestCode:7,}],noticeValue:"足协杯战线连续第2年上演广州德比战",tabActive:1}},methods:{goToMessageHtml(){this.$router.push("/message");},goToSearchHtml(){this.$router.push("/search");},handleScroll(){if(document.getElementById('vanTabs')){this.scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;var offsetTop = document.getElementById('vanTabs').offsetTop;if (this.scroll > offsetTop) {this.fixed = true;} else {this.fixed = false}}}},destroyed () {window.removeEventListener('scroll', this.handleScroll)},mounted(){this.$nextTick(()=>{window.addEventListener('scroll', this.handleScroll)})}}
</script><style lang="less">.fixed{position: fixed !important;top: 0;left: 0;}.htmlGlobal{background-color: #ccc;box-sizing: border-box;}#home{background-color:orange;height: 1rem;box-sizing: border-box;padding: .1rem;.van-row{height: 100%;#message{height: 100%;.van-icon{font-size: .5rem;top: -.4rem;left: .13rem;color: #fff;.van-info{padding: .05rem .1rem;line-height: .3rem;right:-.05rem;}}}#search{.van-search{padding: 0;padding-top: .1rem;.van-cell{border-radius: 20px;height: .6rem;.van-cell__left-icon{font-size: .4rem;position: absolute;top: .15rem;bottom: .1rem;}.van-field__body{position: absolute;left: .5rem;top: .05rem;bottom: .1rem;right: 0;input{font-size: .3rem;}}}}}}}#noticeBar{.van-notice-bar{height: .8rem;.van-notice-bar__left-icon {height: 100%;line-height: .8rem;img{width: .4rem;height: .4rem;vertical-align: middle;}}.van-notice-bar__wrap{height: 100%;line-height: .8rem;.van-notice-bar__content{font-size: .3rem;}}.van-icon.van-icon-close.van-notice-bar__right-icon{font-size: .35rem;right: .1rem;top: .22rem;}}}#vanSwipe{.van-swipe{/*margin: 0 .3rem;*/height:3rem;.van-swipe-item{background-color: deepskyblue;border-radius: 5px;}}}#vanTabs{.van-tabs{}}
</style>