vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate

1 路由独享守卫，单个路由拦截处理

 {path: '/Test',name: 'Test',components: {default: () => import('../views/Test.vue'),footerName: Footer},props: {default: route => {return route.query.search},footerName: {footerdata: "正版"}},//路由独享守卫beforeEnter: (to, from, next) => {console.log('000', to, from)next()}},

可以对路由的来去进行，拦截处理

2 页面内路由拦截和处理写一个test.vue页面

 beforeRouteEnter(to, from, next) {console.log(1, to, from);console.log(2, this); //此时还没有实例，组件没有被激活console.log(3, "此时没有被激活"); //next((vm) => {console.log("通过回调拿到", vm);});},

注意此时拿不到this，需要用回调处理。等到页面所有实例加载完成才会出现。

2 这两个用的不多，可以了解，知道写法用法

beforeRouteLeave(to, from, next) {console.log(4, to, from);console.log(5, this); //可以拿到，已经被激活console.log(6, "此时组件已被被激活"); //next();//next(false);取消跳转},beforeUpdate(to, from, next) {console.log(7, to, from);console.log(8, this); //可以拿到，已经被激活console.log(9, "组件改变，路由，参数改变"); //next();},

beforeRouteLeave

<template><div id="app" style="margin: 50px; line-height: 34px; width: 800px"><h3>test:{{ search }}</h3><el-button @click="clickHome">clickHome</el-button></div>
</template>
<script>
export default {name: "test",props: ["search"],beforeRouteEnter(to, from, next) {console.log(1, to, from);console.log(2, this); //此时还没有实例，组件没有被激活console.log(3, "此时没有被激活"); //next((vm) => {console.log("通过回调拿到", vm);});},beforeRouteLeave(to, from, next) {console.log(4, to, from);console.log(5, this); //可以拿到，已经被激活console.log(6, "此时组件已被被激活"); //next();//next(false);取消跳转},beforeUpdate(to, from, next) {console.log(7, to, from);console.log(8, this); //可以拿到，已经被激活console.log(9, "组件改变，路由，参数改变"); //next();},methods: {clickHome() {this.$router.push({path: "/",});},},
};
</script>

vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate相关推荐

【硬创邦】跟hoowa学做智能路由(十二)：网络音箱之声卡驱动
题记:忽闻水上琵琶声,主人忘归客不发.转轴拨弦三两声,未成曲调先有情. 对于大多数年轻的女性来说,她们最关心的是生活和自己的男人.男人应该更多的关系自己身边的女人,人生是苦比乐多的,因此要乐观的面对自 ...
【SpringBoot】十二、themeleaf 的3种引入页面方式
一.引入前先配置 thymeleaf:cache: false #开发时关闭缓存,不然没法看到实时页面prefix: classpath:/templates/suffix: .htmlencodin ...
Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
文章目录 Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepalive Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件 < ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
独享带宽和共享带宽有哪些区别?
带宽,一直以来都是IDC界内一个比较避讳的话题,大部分IDC服务商都是一笔带过,什么2M.10M甚至是100M,但是很少区分出独享OR共享.标明10M独享带宽的,为什么会比100M共享带宽贵上十几倍 ...
独享IP有什么特点？
互联网的发展带动了各行各业的进步,代理服务器就是其中之一.近几年来市面上的代理服务器的种类繁多,很多免费的代理服务器都是共享IP ,共享IP的弊端就是如果同一IP下的一个网站被限制访问,那么这个IP也 ...
第一卷清晨的帝国第一百四十二章登场
第一卷清晨的帝国第一百四十二章登场清幽的宅院内一片安静,李渔直视燕大子的双眼,过了很长时间后才轻轻启唇,缓声说道:"外无强援不能成事.隆庆有西陵神殿在后方隐而不发,若崇明哥哥你愿意,相 ...
内部链接十二条网页黄金规则
seo似乎有个潜在的规则:seo优化中最不起眼的东西,最难学到的东西,就是网页的链接规则了,有关seo,网上流行一句话:内容为王,外链为皇.其实seo在你达到一定境界,接手的网站上了一定的规模的时候, ...
Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...

vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate

vue路由（十二）路由独享守卫beforeEnter和页面内组件路由守卫：beforeRouteEnter，beforeRouteLeave，beforeUpdate相关推荐

最新文章

热门文章