Vue js repeats the same component when changing a route

Question

I have one auth component that I use both in the login and in the registration route.

const routes = [{ path : '/', name: 'home', component: Home }, { path : '/signin', name: 'signin', component: Auth }, { path : '/signup', name: 'signup', component: Auth }]; 

If, for example, I’m on the login page. The problem is that I enter something into the text inputs and move on to the entry where the text still exists, how do I force the component to initialize?

Answer 1

The best way to do this is to associate the route route with the view key of the router, i.e.

 <router-view :key="$route.path"></router-view> 

This will cause Vue to create a new instance of the component.

EDIT

Updated to provide a meta key that you can add that will allow you to disable component reuse only for required routes. this would need to be clarified if you would like to work with him on routes with a depth of more than 1 level, but this gives you an idea.

 const Foo = { name: 'foo', data () { return { inputText: '', } }, template: ` <div class="box"> <h1>{{ $route.path }}</h1> <input type="text" v-model="inputText"> </div> `, } const Baz = { name: 'baz', data () { return { inputText: '', } }, template: ` <div class="box"> <h1>{{ $route.path }}</h1> <input type="text" v-model="inputText"> </div> `, } const routes = [ { path: '/foo', component: Foo, meta: { reuse: false }, }, { path: '/bar', component: Foo, meta: { reuse: false }, }, { path: '/baz', component: Baz }, { path: '/bop', component: Baz } ] const router = new VueRouter({ routes }) const app = new Vue({ router, data: { key: null, }, }).$mount('#app') router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.reuse === false)) { app.key = to.path } else { app.key = null } next() }) 

 #content { position: relative; height: 200px; } .box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: rgba(0,0,0, 0.2); text-align: center; transform: translate3d(0, 0, 0); } 

 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/ vue-router@2.0.3 "></script> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> <router-link to="/baz">Go to Baz</router-link> <router-link to="/bop">Go to Bop</router-link> </p> <div id="content"> <router-view :key="key"></router-view> </div> <pre>{{ key }}</pre> </div> 

This allows you to combine your router with the Vues transition system to make it pretty awesome!

Answer 2

You can use the key attribute to tell vue to re-run some elements instead of reuse.

eg. you have <input/> in your Auth component that you want to rename in different routes, add key data prop to Auth , use <input :key="key"/> in the template. In your case here

 data() { key: this.$route.path } 

may be a good choice.

Answer 3

vuejs cached component. you do not provide Auth code, but I think the following will help you.

 <template> <input type="text" ID="username" v-model="usernameinput"> <!-- other text boxes and inputs --> </template> export default { name: 'Auth', //component code ..... data: function() { return { usernameinput: '', //and other stuff } }, watch: { // call method if the route changes '$route': 'reInitialize' }, methods: { reInitialize: function() { this.usernameinput = ''; //and so on } }, //remainig component code } 

there is also a different situation, maybe you are using dynamic components, and keep-alive is true.