关于 vue 如何在beforeRouteEnter中获取 this 和操作 data 中的数据
在 vue 项目中,经常需要通过判断从不同的路由进入,显示不同的内容,beforeRouteEnter非常好判断从哪个路由进去,但在这里面因为获取不到this,操作不了 data 中的数据,即使我们知道是从哪个路由进入,也没法对他进行差异化的操作。在官方文档中,beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用不能获取组件实例 ‘this’...
·
在 vue 项目中,经常需要通过判断从不同的页面进入,显示不同的内容,beforeRouteEnter
非常好判断从哪个路由进去,但在这里面因为获取不到this
,操作不了 data
中的数据,即使我们知道是从哪个路由进入,也没法对他进行差异化的操作。
在官方文档中,beforeRouteEnter
在渲染该组件的对应路由被 confirm
前调用
不能获取组件实例 this
因为当前守卫执行前,组件实例还没被创建。
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
官方也提供了方法,就是可以通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
在执行时,执行顺序是 beforeRouteEnter
→ created
→ mounted
→beforeRouteEnter
的next
。通过给next传一个回调,就可以获取像this一样操作data中的数据,也可以执行函数等。
data() {
return {
dataData: "dataData",
};
},
computed: {},
watch: {},
beforeRouteEnter(to, from, next) {
console.log("beforeRouteEnter");
console.log("thisInBeforeRouteEnter", this);
next((vm) => {
console.log("thisInBeforeRouteEnterNext", this);
console.log("vm", vm);
console.log("dataDataInBeforeRouteEnter", vm.dataData);
vm.functionA("fromNext");
});
},
created() {
console.log("created");
console.log("thisInCreated", this);
},
mounted() {
console.log("mounted");
console.log("thisInMounted", this);
},
destroyed() {},
methods: {
functionA(param) {
console.log("fnA", param);
},},
这是打印结果
可以看出:
beforeRouteEnter
中的this
为underfinded
beforeRouteEnter
中的vm
和created
,mounted
中打印的this是一样的beforeRouteEnter
中的next
是在created
和mounted
执行之后才执行的beforeRouteEnter
中的vm
(可使用其他参数) 可以操作data
中的数据,也可以操作methods中的函数,且使用方法和this
一致
如有错误,欢迎指正,谢谢!
以上内容仅供参考,欢迎大家讨论。
更多推荐
已为社区贡献9条内容
所有评论(0)