import Vue from 'vue';
import router from './router';
import store from './store';
import index from './components/index';
import vueWechatTitle from 'vue-wechat-title';Vue.use(vueWechatTitle);
Vue.config.productionTip = false;
//绑定vue
new Vue({el: '#contract',router,store,template: '<index/>',components: {index}
});

import Vue from 'vue';
import Router from 'vue-router';
import contractList from './components/contract-list';
import contractDetail from './components/contract-detail';Vue.use(Router);
const router = new Router({routes: [{path: '/',name: 'contractList',meta: {title: '合同列表',keepAlive:true},component: contractList},{path: '/contractDetail/:timestamp',name: 'contractDetail',meta: {title: '合同详情',keepAlive:true},component: contractDetail}]
});
export default router;

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const state = {};
const actions = {};
const getters = {};
const mutations = {addData: (state, res) => {if (!state.hasOwnProperty(res.key)) {Vue.set(state, res.key, res.value);}console.log('set', state);},//增deleteData: (state, key) => {console.log(key);delete state[key];console.log('del', state);},//删updateData: (state, res) => {if (state.hasOwnProperty(res.key)) {for (let item in res.value) {state[res.key][item] = res.value[item];}}console.log('updateData', state);},//改getData: (state, key) => {if (state.hasOwnProperty(key)) {return state[key];} else {return null;}console.log('get', state);}//查
};export default new Vuex.Store({state,actions,getters,mutations
});

<template><div id="contract"><keep-alive><router-view v-if="$route.meta.keepAlive" v-wechat-title="$route.meta.title"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive" v-wechat-title="$route.meta.title"></router-view></div>
</template>
<script>export default {data() {return {}},computed: {},created() {},mounted() {},methods: {},watch: {}}
</script>

<template><div id="contract-list"><input type="text" v-model="msg"><router-link :to="'/contractDetail/'+new Date().getTime()">点击进详情页</router-link></div>
</template>
<script>export default {data() {return {msg: ''}},computed: {},created() {},mounted() {},methods: {},watch: {}}
</script>
<style scoped>#contract-list {color: red;}
</style>

<template><div id="contract-detail"><input type="text" v-if="currentData" v-model="currentData.msg"> 我是合同详情页<router-link :to="'/contractDetail/'+new Date().getTime()">进如下页详情</router-link>{{currentData}}</div>
</template>
<script>import {mapState} from 'vuex';export default {data() {return {}},computed: {currentKey() {return this.$route.name + this.$route.params.timestamp;},...mapState({currentData(state) {return state[this.currentKey];}})},created() {console.log('created');this.initModel();},mounted() {console.log('mounted');},methods: {createModel() {class model {constructor() {this.msg = '';}}return new model();},initModel() {this.$nextTick(function () {if (!this.$store.state.hasOwnProperty(this.currentKey)) {console.log('initModel-set');this.$store.commit('addData', {key: this.currentKey,value: this.createModel()});}});}},watch: {currentData: {handler: function (value) {console.log('watch-set', this.currentKey);this.$nextTick(function () {this.$store.commit('updateData', {key: this.currentKey,value: value});});},deep: true}},beforeRouteUpdate(to, from, next) {console.log('beforeRouteUpdate1', to, from);//清除老对象if (to.params.timestamp < from.params.timestamp) {this.$store.commit('deleteData', from.name + from.params.timestamp);}//创建新对象
      console.log('beforeRouteUpdate2', to, from);if (to.name == from.name) {console.log(to.name, from.name, to.name == from.name);this.initModel();}next();},beforeRouteLeave(to, from, next) {console.log('beforeRouteLeave', to, from);this.$store.commit('deleteData', from.name + from.params.timestamp);this.$destroy();next();}}
</script>
<style scoped>#contract-detail {color: green;}
</style>