beforeRouteEnter中的this和与created的执行顺序

需求：从page1页进入page2页，page2页需要是一种样式，从其他页面进入page2页需要是另一种样式。

最常见的是从列表页点击详情进入详情页后返回列表页时，列表页需要保持原来的页码，而从其他页进入列表页时页码应为初始值1。

此时我们就需要获取到跳转路由的前一个路由信息来进行分辨页面该展示什么信息，可以使用beforeRouteEnter来进行判断。

一. 如何在beforeRouteEnter中获取vue实例this

从页面A跳转到页面B

to就是页面B，即当前路由信息，跳转后的路由信息

from就是页面A，即跳转前的路由信息

beforeRouteEnter中可以通过next中的vm获取到vue实例信息，vm可以当做this使用，this在beforeRouteEnter中值为null

beforeRouteEnter(to, from, next) {next((vm) => {console.log(to, to.name, "to", from, from.name, "from");//  这里的vm指的就是vue实例，可以用来当做this使用console.log(vm, "vm", this, "this");vm.fromName = from.name; //获取跳转前路由的name并赋值给this.fromName});
},

可以看到上方vm（也就是vue实例this）的 fromName值已经是跳转前路由的name属性值了。

二. beforeRouteEnter的执行顺序

beforeRouteEnter(to, from, next) {console.log("next beforeRouteEnter");next((vm) => {vm.fromName = from.name; //获取跳转前路由的name并赋值给this.fromNameconsole.log(vm.fromName, "nexted beforeRouteEnter");});
},
created() {console.log(this.fromName, "created");
},
mounted() {console.log(this.fromName, "mounted");
},

在同一个项目中beforeRouteEnter出现了两种执行顺序，一种是从菜单点进列表页，执行顺序是

beforeRouteEnter---->created---->mounted----->beforeRouterEnter的next()

另一种是点击列表页的详情按钮进入详情页后通过 this.$router.back(-1) 方法返回列表页，执行顺序是

beforeRouteEnter---->created---->beforeRouterEnter的next()----->mounted

由此，建议根据路由信息不同而执行不同操作的代码应写到beforeRouteEnter的next()中，不要写到created或mounted里。

三. 为解决需求举个栗子，例子使用的是vue框架和AntdVue前端UI框架（例子仅提供思路，不可直接复制运行）

<template><a-layout class="listcontent-container"><div class="table"><a-table :columns="columns" :data-source="caseData" :pagination="false"><template #configureDetail="{ text }"><span class="color" @click="handlerToConfigDetail(text)">详情</span></template></a-table></div><div class="pagination"><a-pagination:total="total":show-total="(total) => `共 ${total} 条`":page-size="pageSize"v-model:current="current"/></div></a-layout>
</template>
<script>
export default {name: "ListContent",data() {return {caseData: [],columns: [],current: 1, //当前页码pageSize: 10, //当前一页容量total: 0, //当前总数};},beforeRouteEnter(to, from, next) {next((vm) => {//  这里的vm指的就是vue实例，可以用来当做this使用vm.fromName = from.name; //获取上一级路由的name//判断缓存的列表页的信息是否能正确解析并返回缓存的值let config = vm.getCaseListConfig();//如果是从详情页跳转回此列表页的，scene-detail为详情页路由名if (vm.fromName === "scene-detail") {//获取的缓存是否有值，有值根据缓存的值赋值当前页及页容量，无值设置为初始页1，页容量10if (Object.keys(config).length > 0) {vm.current = config.current;vm.pageSize = config.pageSize;} else {vm.current = 1;vm.pageSize = 10;}} else {//非详情页跳转到列表页，设置为初始页1，页容量10vm.current = 1;vm.pageSize = 10;}//发送请求获取列表数据vm.sendGetCaseExecution();});},methods: {//判断缓存的列表页的信息是否能正确解析并返回缓存的值getCaseListConfig() {try {return JSON.parse(localStorage.getItem("caseListConfig")) || {};} catch (error) {return {};}},//发送请求获取列表数据sendGetCaseExecution() {//...根据当前的页码信息和页容量信息向后端发送请求获取数据},//点击列表中的详情按钮handlerToConfigDetail(text) {//保留列表页当前页的信息let obj = {};obj.current = this.current;obj.pageSize = this.pageSize;localStorage.setItem("caseListConfig", JSON.stringify(obj));},},
};
</script>

注意：某些情况下可能会出现当前页码current明明已经是点击进详情页保存好的非1页，发送请求获取的数据也是非1页的值，但页面上的页码组件样式还是显示的是第1页。这种情况可以给页码组件加个v-if来控制页码组件的显示。

先默认给v-if设置pageShow值为false,然后在发送请求有返回内容的时候设置pageShow值为true来显示页码组件。

<template><a-layout class="listcontent-container"><!-- ......... --><div class="pagination"><a-paginationv-if="pageShow":total="total":show-total="(total) => `共 ${total} 条`":page-size="pageSize"v-model:current="current"/></div></a-layout>
</template>
<script>
export default {name: "ListContent",data() {return {current: 1, //当前页码pageSize: 10, //当前页容量total: 0, //当前总数pageShow: false, //page组件是否显示};},beforeRouteEnter(to, from, next) {next((vm) => {vm.sendGetCaseExecution();});},methods: {//请求列表数据sendGetCaseExecution() {//发送请求getCaseExecutionRecords(this.current - 1, this.pageSize).then((res) => {console.log(res);this.pageShow = true; //设置页码组件显示});},},
};
</script>

beforeRouteEnter中的this和与created的执行顺序相关推荐

事件循环中的宏任务和微任务执行顺序
事件循环中的宏任务和微任务执行顺序先来了解一下事件循环.宏任务.微任务和Promise 1.事件循环(Event Loop)运行机制执行一个宏任务(栈中没有就从事件队列中获取) 执行过程中如果遇到 ...
python try catch finally执行顺序_对python中的try、except、finally 执行顺序详解
如下所示: def test1(): try: print('to do stuff') raise Exception('hehe') print('to return in try') retur ...
begin end中阻塞语句与非阻塞语句执行顺序的问题
1 module fsm_2(clk,A,Y); input clk,A; output reg Y; reg q1; always@(posedge clk) begin Y<=q1& ...
JS事件循环中的宏任务和微任务执行顺序
1. 宏任务和微任务事件其中微任务的优先级高于宏任务,括号内为事件运行环境宏任务微任务 I/O事件/onClick点击事件 process.netTick (Node) setTimeout N ...
oracle中简单查询语句的格式及执行顺序分析
一条简单的查询sql格式如下: SELECT ... FROM .... [WHERE ...] --过滤单行 [GROUP BY ... [HAVING ...]]--GROUP BY对前面wh ...
linux中fork函数及子进程父进程执行顺序
目录一.fork入门知识二.fork进阶知识一.fork入门知识一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以 ...
java子类代码块_java中父类子类静态代码块、构造代码块执行顺序
父类静态(代码块,变量赋值二者按顺序执行) 子类静态父类构造代码块父类构造方法子类构造代码块子类构造方法普通方法在实列调用的时候执行,肯定位于上面之后了 //父类A public class ...
关于Ajax load页面中js部分$(function(){})的执行顺序
<script type="text/javascript">console.error(11111);$(function(){console.error(22222 ...
vue created 调用方法_vue 基础-生命周期 lifecycle 的执行顺序和作用
前言 <vue 基础>系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解.(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读) 平时开发中,我真的不太 ...

beforeRouteEnter中的this和与created的执行顺序

beforeRouteEnter中的this和与created的执行顺序相关推荐

最新文章

热门文章