保持 Vue 状态

Question

有没有办法保持 vue 的状态，以便在导航回来时显示它？

示例：

1) 我在页面 A 上搜索内容，项目已加载，我向下滚动并从列表中选择项目 34。

2) 现在页面 B 打开，其中包含有关该项目的信息。我单击返回，但在空白页面 A 上结束。

我想要的是搜索结果，最好是我离开那个 vue 时的滚动位置。

这是否可能在 vue2 中开箱即用，还是我必须自己编写所有代码？

Answer 1

So you want to somehow vuejs to remember to scrollPosition.As always that is very simple with vue.

滚动行为可以由 Vue 管理-Router.I给你举个例子。

具有 2 个滚动位置的页面组件

<template>
  <div>
      <div id="data1" style="height:700px;background:blue">
        First scroll position
      </div>

      <div id="data2" style="height:700px;background:yellow">
        Second scroll position
      </div>
  </div>
</template>

导航到页面组件的组件

<template>
  <div>
    <router-link 
    tag="button"
    :to="link"
    >
    Navigate to Page in scroll Position 2
    </router-link>
  </div>
</template>
<script>
    export default {
    data: () => ({
      link: {
        name: 'Page',
        hash: '#data2' //<= important,this adds the #data2 in url
      }    
    })
  }
</script>

现在您的路由文件必须如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Page from '@/components/Page.vue'
import NavigationButton from '@/components/NavigationButton.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Page',
      name: 'Page',
      component: Page,
    },
    {
      path: '/',
      name: 'NavigationButton',
      component: NavigationButton
    },
    //other routes
  ],
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    if(savedPosition){ //when use press back button will go at the position he was on the page
        return savedPosition
    }
    if(to.hash){ //if has a hash positition to go
        return { selector: to.hash } //go to the page in scrolled Position
    }
    return { x:0, y: 0 } //go to the page in scroll = 0 Position
  }  
})

我理解你的问题，但我不确定你问的是什么 that.Anyway 如果我是对的，请不要忘记查看有关滚动行为的官方 vue-router 文档。See here

保持 Vue 状态

Keeping State of Vue

vue.js

vue-router

vuejs2