Vue js rerender the same component when changing route

Question

I have one auth component that I am using both in the login and the signup route.

const routes = [{
  path     : \'/\',
  name: \'home\',
  component: Home
}         


        

Answer 1

You can use the key attribute to indicate vue to rerender some elements instead of reusing them.

e.g. you have an <input/> in your Auth component which you want to rerender under different routes, add a 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 2

The better way to do this is actually to bind the routes path to the router-view's key, i.e.

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

Doing so will force Vue to create a new instance of the component.

EDIT

Updated to provide a meta key you could add which would allow you to disable the reuse of components only for the routes you require. this would need refining if you wanted to work with it on routes that are more than 1 level deep - but it gives you the 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 then allows you to combine your router-view with Vues transition system so it becomes pretty awesome!

Answer 3

vuejs caches rendered component. you don't provide Auth component code, but i think the following helps 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
}

also there is another posibilty, may be you are using dynamic components and keep-alive is true.