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

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,
  },

这很有效，直到我重新加载页面/路由，因为数据丢失。所以我有点想在加载组件后从父级获取数据。

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

我是Vue的新手，我想问一下这里的最佳实践是什么。是否像这里描述的那样使用vue路由器重新加载组件？请给我一个提示。

Answer 1

本地存储是否合适取决于用例。

当您重新加载页面/路由时，您说数据丢失了。完全可以存储这些数据，以防止路由更改/重新加载时的数据丢失。但是更改/重新加载页面只能通过将数据存储在localStore（并在页面init上从localstore检索）中，或者将其存储在服务器上并在页面init上检索来解决...

Vuex可能会帮助您进行路由更改/重新加载部分，但即使是Vuex也不会帮助您进行页面更改/重新加载。

我将向您展示如何为第一种情况保存数据的示例：路由更改和重新加载，因为这可以在不添加Vuex的情况下实现。我们将通过将数据放在父组件中并将这些数据传递给我们的路由来实现这一点。当路由更改数据时，它应该发出更新事件（包括更新的数据），父路由应该存储更改的数据。

我将展示一个示例场景，其中父级持有所有数据。路由负责编辑数据的不同方面。每次我在路由之间切换时，父路由提供数据。

这里可以找到一个工作示例：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的长度进行限制。您还负责验证/清理传入的数据，不要相信它不会被篡改。顺便说一句，localStorage数据也适用于此。常见情况包括存储搜索查询：如果刷新页面，则仍然有搜索查询
• 让后端保存数据并在页面加载时检索用户的数据