Vue js rerender the same component when changing route
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/[email protected]"></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!
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.