Question

我在vuejs SPA中使用vue-router设置了几条路线：

/ create / feedback
/编辑/反馈/ 66a0660662674061b84e8ea2fface0e4

每条路线的组件都是相同的形式，有一些智能可以根据路线中ID的缺失或存在来更改表格值（反馈ID，在我的例子中）。

我注意到当我从编辑路线点击创建路线时，表单中的数据不会清除。

以下是我的路线文件的要点

import FeedbackFormView    from './components/FeedbackForm.vue'

// Routes
const routes = [
    {
      path: '/create/feedback',
      component: FeedbackFormView,
      name: 'FeedbackCreate',
      meta: {
          description: 'Create Feedback',
      }
    },
    {
      path: '/edit/feedback/:feedbackId',
      component: FeedbackFormView,
      name: 'FeedbackEdit',
      meta: {
          description: 'Edit Feedback Form'
      },
      props: true
    }


   ]

export default routes

以下是我的组件的要点

<template lang="html">
  <div>
      <form>
          <input v-model="model.someProperty">
      </form>
  </div>
</template>

<script>
export default {
    data() => ({model: {someProperty:''}}),
    props: ['feedbackId'],
    created() => {
        if (!this.$props['feedbackId']) {
          return;
        }

        // otherwise do ajax call and populate model
        // ... details omitted
    }
}
</script>

但是，如果我按如下方式修改我的组件，一切都按预期工作

<template lang="html">
  <div>
      <form>
          <input v-model="model.someProperty">
      </form>
  </div>
</template>

<script>
export default {
    data() => ({model: {someProperty:''}}),
    props: ['feedbackId'],
    created() => {
        if (!this.$props['feedbackId']) {
          return;
        }

        // otherwise do ajax call and populate model
        // ... details omitted
    },
    watch: {
      '$route' (to, from) {
        if (to.path === '/create/feedback') {
          this.model = {}
        }
      }
    }
}
</script>

这是为什么？为什么我需要观看？

我认为改变路线就足够了，因为路由的目的是模仿页面导航的语义行为

Answer 1

对于不同的路径，您有相同的组件，当您从创建路径组件编辑路径已经创建并安装时，组件的状态不会被清除。

每次路由更改后，您的组件都可以使用$router提供的vue-router来监听路由更改。

Answer 2

对于那些稍后来的人，以下答案解决了我面临的问题：

Vue-Router: view returning to login page after page refresh

通过共享组件的路由导航vuejs SPA不会按预期刷新组件数据

2 个答案: