live example: https://cc.czcczc.cc/20180703/
定义下角色
列表页:A.vue 可以理解为,后台数据管理页面的数据列表页
编辑页:B.vue 可以理解为,后台数据管理页面的单条数据编辑页
编辑选项页:C.vue 可以理解为,由单条数据编辑页跳转到的一个单列表页,选了之后带参跳回B(自行脑补TB_APP中的选择收货地址)
先描述下需求,
1、列表页A,显示N条数据项,单击其中一项跳转到编辑页B
2、当然,点击A当中的不同数据项,B的呈现肯定是不一样的,A>B1>A>B2时候,B2页面里面不能显示B1的内容(看到这里,就觉得,没必要设置缓存,对吧,且看下面)
3、在编辑页中,我需要触发一个事件跳转到C页面,例如选择收货地址,选择一个之后,跳回编辑页面B,并传递选择项的参数(如index)过来,页面B根据传递过来的参数,进行页面内容变化呈现。那么必须要保证之前编辑页的输入项还存在(总不能选个收货地址,填好的电话号码姓名其他信息都扔掉吧),也就是期望B1.1>B1.2>C>B1.3时候,不会出现B1.1>B1.2>C>B1.1,所以,编辑页面B必须得缓存,
4、那么,问题来了。 编辑页面B要保证从A跳到B时候,B页面都要重新加载,C回到A的时候,B显示之前的页面
问题一个个解决,先解决第一个,
1、如何使用页面缓存功能?
1.1App.vue文件中必须要把<router-view>包裹起来
1.2index.js中配置路由时候,设置路由meta属性中的keepAlive子属性为true
走完这一步,所有的页面都会被缓存,现在解决第二个问题
2、如何在B到C,然后C到B的时候,从C中把参数传递到B中
详见B.vue中设置监听事件,以及C.vue中的emit动作。C中发指令,B中执行对应操作
走完这一步,会发现A>B>A>B>C>B时候,bus.on里面对应的事件会触发两次,那么
3、如何移除事件,确保不要重复注册
详见B.vue中beforeDestroy事件,当页面被移除时候,就移除该事件
现在就剩最后一步了。
4、如何确保A>B的时候,B都是重新加载?
修改index.js中 A.vue中的meta.keepAlive = false
按理来说,应该在A跳到B之前。name:"B"的router的meta.keepAlive = false即可。但是后续第一次B>C>B的时候,页面还是重新加载了。但是按照上面设置就没有问题了。感觉这个需求是“误打正着”“试错”实现出来的
需求是实现了,那么最后一个问题
5、4中的怪异现象到底是为什么,你找出来了吗?
<template>
<div id="app">
//吐槽下,网上有个范例keepAlive写的是keep-alive,很迷糊
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
/router/index.js 注意注释的地方,【注意这里,整个教程这里是最关键的地方】
import Vue from 'vue'
import Router from 'vue-router'
import A from '@/components/A'
import B from '@/components/B'
import C from '@/components/C'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
redirect: {
name: 'A'
}
},
{
path: '/A',
name: 'A',
component: A,
meta: {
keepAlive: false//【注意这里,我设置的是!!!!false,整个教程这里是最关键的】
}
},
{
path: '/B',
name: 'B',
component: B,
meta: {
keepAlive: true
}
},
{
path: '/C',
name: 'C',
component: C,
meta: {
keepAlive: true
}
}
]
})
A.vue
<template>
<div class="hello">
这是大列表页
<router-link :to="{name: 'B'}">到B</router-link>
</div>
</template>
<script>
export default {
name: "B",
data() {
return {};
}
};
</script>
B.vue
<template>
<div class="hello">
这是详情页,里面有一个input
<div @click="bchange">{{myText}}</div>
<router-link :to="{name: 'A'}">到A</router-link>
<router-link :to="{name: 'C'}">到C</router-link>
</div>
</template>
<script>
import bus from "../common/eventBus";
export default {
name: "A",
data() {
return {
myText: "点我变换"
};
},
mounted: function() {//挂载的时候设置监听
var _this = this;
console.log("B的监听事件被注册");
bus.$on("C_Change_B", function(res) {
console.log("接收到通知了", res);
_this.myText = res;
});
},
beforeDestroy() {//确保不会重复注册该类型事件
console.log("移除事件注册");
bus.$off("C_Change_B");
},
methods: {
bchange() {
this.myText = "点击之后,B自身修改的";
}
}
};
</script>
C.vue
<template>
<div class="hello">
子列表页,这边点了,详情页就变了
<div @click="change(1)">
把输入框的变成1
</div>
<div @click="change(2)">
把输入框的变成2
</div>
<div @click="change(3)">
把输入框的变成3
</div>
</div>
</template>
<script>
import bus from "../common/eventBus";
export default {
name: "C",
data() {
return {};
},
methods: {
change(res) {
bus.$emit("C_Change_B", "C端提出修改的" + res);
this.$router.go(-1)
}
}
};
</script>
common/eventBus.js
import Vue from 'vue';
export default new Vue();
live example: https://cc.czcczc.cc/20180703/
定义下角色
列表页:A.vue 可以理解为,后台数据管理页面的数据列表页
编辑页:B.vue 可以理解为,后台数据管理页面的单条数据编辑页
编辑选项页:C.vue 可以理解为,由单条数据编辑页跳转到的一个单列表页,选了之后带参跳回B(自行脑补TB_APP中的选择收货地址)
先描述下需求,
1、列表页A,显示N条数据项,单击其中一项跳转到编辑页B
2、当然,点击A当中的不同数据项,B的呈现肯定是不一样的,A>B1>A>B2时候,B2页面里面不能显示B1的内容(看到这里,就觉得,没必要设置缓存,对吧,且看下面)
3、在编辑页中,我需要触发一个事件跳转到C页面,例如选择收货地址,选择一个之后,跳回编辑页面B,并传递选择项的参数(如index)过来,页面B根据传递过来的参数,进行页面内容变化呈现。那么必须要保证之前编辑页的输入项还存在(总不能选个收货地址,填好的电话号码姓名其他信息都扔掉吧),也就是期望B1.1>B1.2>C>B1.3时候,不会出现B1.1>B1.2>C>B1.1,所以,编辑页面B必须得缓存,
4、那么,问题来了。 编辑页面B要保证从A跳到B时候,B页面都要重新加载,C回到A的时候,B显示之前的页面
问题一个个解决,先解决第一个,
1、如何使用页面缓存功能?
1.1App.vue文件中必须要把<router-view>包裹起来
1.2index.js中配置路由时候,设置路由meta属性中的keepAlive子属性为true
走完这一步,所有的页面都会被缓存,现在解决第二个问题
2、如何在B到C,然后C到B的时候,从C中把参数传递到B中
详见B.vue中设置监听事件,以及C.vue中的emit动作。C中发指令,B中执行对应操作
走完这一步,会发现A>B>A>B>C>B时候,bus.on里面对应的事件会触发两次,那么
3、如何移除事件,确保不要重复注册
详见B.vue中beforeDestroy事件,当页面被移除时候,就移除该事件
现在就剩最后一步了。
4、如何确保A>B的时候,B都是重新加载?
修改index.js中 A.vue中的meta.keepAlive = false
按理来说,应该在A跳到B之前。name:"B"的router的meta.keepAlive = false即可。但是后续第一次B>C>B的时候,页面还是重新加载了。但是按照上面设置就没有问题了。感觉这个需求是“误打正着”“试错”实现出来的
需求是实现了,那么最后一个问题
5、4中的怪异现象到底是为什么,你找出来了吗?
<template>
<div id="app">
//吐槽下,网上有个范例keepAlive写的是keep-alive,很迷糊
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
/router/index.js 注意注释的地方,【注意这里,整个教程这里是最关键的地方】
import Vue from 'vue'
import Router from 'vue-router'
import A from '@/components/A'
import B from '@/components/B'
import C from '@/components/C'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
redirect: {
name: 'A'
}
},
{
path: '/A',
name: 'A',
component: A,
meta: {
keepAlive: false//【注意这里,我设置的是!!!!false,整个教程这里是最关键的】
}
},
{
path: '/B',
name: 'B',
component: B,
meta: {
keepAlive: true
}
},
{
path: '/C',
name: 'C',
component: C,
meta: {
keepAlive: true
}
}
]
})
A.vue
<template>
<div class="hello">
这是大列表页
<router-link :to="{name: 'B'}">到B</router-link>
</div>
</template>
<script>
export default {
name: "B",
data() {
return {};
}
};
</script>
B.vue
<template>
<div class="hello">
这是详情页,里面有一个input
<div @click="bchange">{{myText}}</div>
<router-link :to="{name: 'A'}">到A</router-link>
<router-link :to="{name: 'C'}">到C</router-link>
</div>
</template>
<script>
import bus from "../common/eventBus";
export default {
name: "A",
data() {
return {
myText: "点我变换"
};
},
mounted: function() {//挂载的时候设置监听
var _this = this;
console.log("B的监听事件被注册");
bus.$on("C_Change_B", function(res) {
console.log("接收到通知了", res);
_this.myText = res;
});
},
beforeDestroy() {//确保不会重复注册该类型事件
console.log("移除事件注册");
bus.$off("C_Change_B");
},
methods: {
bchange() {
this.myText = "点击之后,B自身修改的";
}
}
};
</script>
C.vue
<template>
<div class="hello">
子列表页,这边点了,详情页就变了
<div @click="change(1)">
把输入框的变成1
</div>
<div @click="change(2)">
把输入框的变成2
</div>
<div @click="change(3)">
把输入框的变成3
</div>
</div>
</template>
<script>
import bus from "../common/eventBus";
export default {
name: "C",
data() {
return {};
},
methods: {
change(res) {
bus.$emit("C_Change_B", "C端提出修改的" + res);
this.$router.go(-1)
}
}
};
</script>
common/eventBus.js
import Vue from 'vue';
export default new Vue();
原文发布时间:2018-07-03
原文作者:微信小程序-暗潮
本文来源掘金如需转载请紧急联系作者