[Vuejs]-Vuejs : Force to not reuse same component when navigating?

by

0đź‘Ť

âś…

Following the comments provided by @S.Visser @Terry and @A.Lau I changed the “architecture” of my components.

I ended up with 2 new components UserFormCreate and UserFormRead (which have each a dedicated route) that both embed a UserForm. That last one does not have a route associated but is used in the 2 previous instead.

It keeps the DRY principle since my UserForm is written only once.
And I’m able to call it with different props so it suits my need.

Since it was the main concern, I don’t have to forceUpdate() or whatever to obtain the result I wanted to achieve too.

Instead when I hit the Create Another button it simply calls the URL of UserFormCreate and so it render a new UserForm.

UserFormRead :

<template>
  <v-container fluid>
    <user-form :userId="userId"/>
  </v-container>
</template>

<script>
import UserForm from './UserForm'
export default {
  name: 'UserFormRead',
  components: {
    UserForm
  },
  props: {
    userId: { type: Number, default: null }
  }
}
</script>

UserFormCreate :

<template>
  <v-container fluid>
    <user-form :editing="true"/>
  </v-container>
</template>

<script>
import UserForm from './UserForm'
export default {
  name: 'UserFormCreate',
  components: {
    UserForm
  }
}
</script>

The 2 routes associated :

{ path: '/user/create', name: 'UserFormCreate', component: UserFormCreate, props: true },
{ path: '/user/:userId', name: 'UserFormRead', component: UserFormRead, props: true },

I won’t show the UserForm here since it is very long and there is no reason to do so since it wasn’t the point.

Leave a comment