Navigating SPA über Routen vuejs die Komponente nicht teilt Komponentendaten aktualisieren, wie erwartet

Question

ich ein paar Strecken in meinem vuejs SPA haben, die ich unter Verwendung der vue-Router einrichten:

• /create/Feedback
• /edit/Feedback-/66a0660662674061b84e8ea2fface0e4

für jede Route die Komponente ist die gleiche Form mit etwas Smarts Form Werte basierend auf der Abwesenheit oder Gegenwart der ID in der Route (feedbackID, in meinem Beispiel) zu ändern.

Ich stelle fest, dass wenn ich von der Bearbeitungsroute auf die Create-Route klicke, die Daten in meinem Formular nicht gelöscht werden.

ist Unterhalb der Kern meiner Route Datei

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 

Unterhalb der Kern meiner Komponente

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

Allerdings, wenn ich meine Komponente wie folgt ändern, alles funktioniert wie

erwartet

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

Warum ist das? Warum brauche ich Uhr?

Ich hätte aber, dass wechselnde Routen ausreichen würden, wie der Zweck des Routings ist das semantische Verhalten der Seitennavigation

Answer 1

Für diejenigen, die diese später kommen, richtet folgende Antwort die Frage, die ich gegenüber war:

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

Answer 2

Sie haben gleiche Komponente für verschiedene Routen zu imitieren, wenn Sie Route von der Route erstellen gehen zu bearbeiten Die Komponente ist bereits erstellt und bereitgestellt, sodass der Status der Komponente nicht gelöscht wird.

Ihre Komponente kann Routenänderungen unter Verwendung von $router, die von vue-router bereitgestellt wird, jedes Mal abhören, wenn sich die Route ändert, wird der Watcher aufgerufen.