vuejs切换视图同时保持状态

http://cn.vuejs.org/guide/components.html#动态组件

动态组件

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 元素，动态地绑定到它的 is 特性：

new Vue({

  el: 'body',

  data: {

    currentView: 'home'

  },

  components: {

    home: { /* ... */ },

    posts: { /* ... */ },

    archive: { /* ... */ }

  }

})

<component :is="currentView">

  <!-- 组件在 vm.currentview 变化时改变 -->

</component>

keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

<component :is="currentView" keep-alive>

  <!-- 非活动组件将被缓存 -->

</component>

路由

对于单页应用，推荐使用官方库 vue-router。详细请查看它的文档。

如果你只需要非常简单的路由逻辑，可以这么做，监听 hashchange 事件并使用动态组件：

示例：

<div id="app">

  <component :is="currentView"></component>

</div>

Vue.component('home', { /* ... */ })

Vue.component('page1', { /* ... */ })

var app = new Vue({

  el: '#app',

  data: {

    currentView: 'home'

  }

})

// 在路由处理器中切换页面

app.currentView = 'page1'

利用这种机制也可以非常容易地配合其它路由库，如 Page.js 或 Director。