使用 vue 和 vue-router 重新加载路由后从父组件获取数据

Question

我有一个组件显示多个路线（第 1 步、第 2 步、第 3 步...）。我导航并传递

之类的属性

<router-view
  @next-button-step1="
    $router.push({
      name: 'Step2',
      params: { myprop: thisprop },
    })
    "
    [...]
</router-view>

路线定义如

const routes = [
  {
    path: "/s2",
    name: "Step2",
    component: Step2,
    props: true,
  },

这很好用，直到我重新加载 page/route，因为数据丢失了。所以我有点想在加载组件后从父级获取数据。

我的一个想法是使用本地存储，但这感觉不对。

我是Vue的新手，想请教这里的最佳实践是什么。它是像这里描述的 vuex Reload component with vue-router 吗？我将不胜感激。

Answer 1

localStorage 是否合适取决于用例。

您说重新加载 page/route 时数据丢失。完全有可能存储此数据以防止路由 change/reload 上的 data-loss。但是 changing/reloading 页面只能通过将数据存储在 localStorage 中（并在页面初始化时从 localStorage 检索）或将其存储在服务器上并在页面初始化时检索来解决...

Vuex 可能会帮助您处理路由 change/reload 部分，但即使 Vuex 也不会帮助您处理页面 change/reload.

我给大家举个例子，第一种情况的数据保存：路由变化和重新加载，因为这可能不需要添加Vuex就可以实现。我们将通过将数据放入 parent 组件并将该数据传递给我们的路由来实现这一点。当路由更改数据时，它应该发出一个 update-event（包括更新的数据）并且 parent 应该存储更改的数据。

我将展示一个示例场景，其中 parent 包含所有数据。路线负责编辑数据的不同方面。每次我在路线之间切换时，parent 都会提供数据。

可在此处找到工作示例：https://jsfiddle.net/b2pyv356/

// parent component / app.vue
<template>

   <div>
        <router-view 
              :state="state" 
              @updatestate="updateState"
        ></router-view>
        
        <pre>Parent state: {{state}} </pre>
    </div>
    

</template>
<script>
export default {
    data() {
        return {
            state: {
                name: 'name',
                lastname: 'lastname'
            }
        }
    },
    methods: {
        updateState(state) {
            this.state = state;
        }
    }
};
</script>

// page1.vue
<template>

    <div>
        Route 1: State is: 
        <pre>{{state}}</pre>
        <div>
            Name: <input v-model="state.name">
            <button @click="$emit('updateState', state)">Save</button><br>
        </div>
        <router-link to="/page2">Next step</router-link>
    </div>

</template>
<script>
export default { props: ['state'] }
</script>

// page2.vue
<template>

    <div>
        Route 2: State is <pre>{{state}}</pre>
        Name: <input v-model="state.name">
        <button @click="$emit('updateState', state)">Save</button><br>
        <router-link to="/">Previous page</router-link>
    </div>

</template>
<script>
export default { props: ['state'] }
</script>

持久化数据：

在 updateState 上，您可以将数据存储在 localStorage
您可以在请求 url ($router.params) 或页面查询字符串中存储一些数据。这有限制：一些浏览器强制限制 url 的长度。你还要对validate/sanitize传入的数据负责，不要相信它不会被篡改。顺便说一下，这同样适用于 localStorage 数据。常见情况包括存储搜索查询：如果您刷新页面，您仍然有搜索查询。
让后端保存数据并在页面加载时检索用户数据。

使用 vue 和 vue-router 重新加载路由后从父组件获取数据

Fetching data from parent-component after reload a route with vue and vue-router

vue.js

vue-router

vuex