How to switch vue.js router views without rerendering html - vue.js

Question

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.
Probably my problem is close to different way how v-if and v-show works:
https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
I build an example based on the vue router example:
https://jsfiddle.net/okuc64d2/6/
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({
routes
})
const app = new Vue({
router
}).$mount('#app')
// Now the app has started!
.router-link-active {
color: red;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<ul>
<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>
</ul>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>

Answer 1

You can save input on keyup to vuex store and use that to your component.