How to switch vue.js router views without rerendering html

I am using vue and the official router. My app has some views and one view has a form with some inputs. Now I am looking for a solution to switch between to views without loosing the input data / rerendering the view. An extra save button in the form isnt an option.

Probetly my problem is close to diffent way how v-if and v-show works:

I build an example based on the vue router example:

const Foo = { 
	data: function () {
            return {
                text: "abc"
  template: '<div>VIEW A: <input v-model="text" placeholder="edit me"></div>' 
const Bar = { 
	data: function () {
            return {
                text: "123"
  template: '<div>VIEW B: <input v-model="text" placeholder="edit me"></div>' 

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }

const router = new VueRouter({

const app = new Vue({

// Now the app has started!
.router-link-active {
  color: red;
<script src=""></script>
<script src=""></script>

<div id="app">
  <h1>Hello App!</h1>
    <li>Go to  Foo</li>
    <li>Change input</li>
    <li>Go to Bar</li>
    <li>Go back to Foo</li>
    <li>Input is resetted</li>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

Leave a Reply

Your email address will not be published. Required fields are marked *