时间戳

首页 > 解决方案 > 如何在不重新渲染 html 的情况下切换 vue.js 路由器视图

vue.js - 如何在不重新渲染 html 的情况下切换 vue.js 路由器视图

问题描述

我正在使用 vue 和官方路由器。我的应用程序有一些视图，一个视图有一个带有一些输入的表单。现在我正在寻找一种在不丢失输入数据/重新渲染视图的情况下切换视图的解决方案。表单中的额外保存按钮不是一个选项。

可能我的问题与 v-if 和 v-show 的工作方式不同： https ://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

我基于 vue 路由器示例构建了一个示例： 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>

标签： vue.jsvue-router

解决方案

您可以将 keyup 上的输入保存到 vuex 存储并将其用于您的组件。

推荐阅读