• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

vuejs2 来源:Bas 6次浏览

我有一个测试列表器产品和详细信息。现在,当我在浏览器中使用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><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) 
     //}) 
    } 

} 

Lister

详细信息:

Detail


===========解决方案如下:

Vue的路由器支持this behavior。

编辑:

所有你需要做的就是添加scrollBehaviorrouterOptions

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

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

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)