vue中路由返回上一个页面,恢复到上一个页面的滚动位置

第一步:路由文件的配置(对你所需要的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-search
             placeholder="搜你感兴趣的"
             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=noticeValue
                        left-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>