Vue.js返回按鈕瀏覽器詳細信息返回到列表器位置

Question

我有一個測試列表器產品和詳細信息。現在，當我在瀏覽器中使用de backbutton返回時，不會回到wright的位置。

所以，如果我在列表中向下滾動，請點擊產品詳細信息，並返回它不會去我之前點擊的位置。

我該如何做到這一點？

Main.js

Vue.config.productionTip = false 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
}) 

路由器：

出口新的默認路由器（{ 模式： '歷史'， scrollBehavior（於從，savedPosition）{ 如果（savedPosition）{ console.log（savedPosition）

  return savedPosition; 

     } else { 
      return {x: 0, y: 0}; 
     } 
    }, 
    routes: [ 
     { 
      path: '/', 
      name: 'Home', 
      component: Home 
     }, 
     { 
      path: '/products', 
      name: 'Products', 
      component: Products, 
      props: true, 
     }, 
     { 
      path: '/product/:id', 
      name: 'Productdetail', 
      component: Productdetail, 
      props: true 
     } 
    ] 
}) 

Lister：

<template> 
    <ul v-if="posts && posts.length"> 
     <li v-for="post of posts" v-bind:id="post.id"> 
      <p><strong>{{post.title}}</strong></p> 
      <p>{{post.body}}</p> 
      <router-link :to="{path: '/product/'+post.id, replace: true}">{{post.title}}</router-link> 

      <hr> 
     </li> 
    </ul> 
</template> 

import axios from 'axios'; 

export default { 

    name: 'Products', 
    props: ["guid"], 
    data() { 
     return { 
      posts: [], 
      msg: 'Products' 
     } 
    }, 
    created() { 
     axios.get('http://jsonplaceholder.typicode.com/posts') 
      .then(response => { 
       // JSON responses are automatically parsed. 
       this.posts = response.data 
      }) 
      .catch(e => { 
       this.errors.push(e) 
      }) 

     //window.addEventListener('load',() => { 
      setTimeout(() => { 
       var str = window.location.hash; 
       var res = str.replace("#bas", ""); 

       var div = document.getElementById(res); 
       var rect = div.getBoundingClientRect(); 

       $('html, body').animate({ 
        scrollTop: rect.top 
       }, 500); 
      }, 100) 
     //}) 
    } 

} 

詳細信息：

Answer 1

Vue的路由器支持this behavior。

編輯：

所有你需要做的就是添加scrollBehavior您routerOptions。

export default new Router({ 
    scrollBehavior (to, from, savedPosition) { 
    if (savedPosition) { 
     return savedPosition; 

    } else { 
     return { x: 0, y: 0 }; 
    } 
    }, 
    routes: [] 
});