Vue.js返回按钮浏览器详细信息返回到列表器位置

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个测试列表器产品和详细信息。现在，当我在浏览器中使用de backbutton返回时，不会回到wright的位置。Vue.js返回按钮浏览器详细信息返回到列表器位置

所以，如果我在列表中向下滚动，请点击产品详细信息，并返回它不会去我之前点击的位置。

我该如何做到这一点？

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><span>{{post.title}}</span></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) 
     //}) 
    } 
}

详细信息：

回答：

Vue的路由器支持this behavior。

编辑：

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

export default new Router({ 
    scrollBehavior (to, from, savedPosition) { 
    if (savedPosition) { 
     return savedPosition; 
    } else { 
     return { x: 0, y: 0 }; 
    } 
    }, 
    routes: [] 
});

以上是 Vue.js返回按钮浏览器详细信息返回到列表器位置 的全部内容， 来源链接： utcz.com/qa/259477.html

回到顶部