位置: IT常识 - 正文

Vue--Router--解决多路由复用同一组件页面不刷新问题(vue-router query)

编辑:rootadmin
Vue--Router--解决多路由复用同一组件页面不刷新问题

推荐整理分享Vue--Router--解决多路由复用同一组件页面不刷新问题(vue-router query),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue,router,vue-routet,vue.$router,vue.$router,vue中routes,vue-routet,vue.$router,vue $route $router,内容如对您有帮助,希望把文章链接给更多的朋友!

原文网址:Vue--Router--解决多路由复用同一组件页面不刷新问题_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题。

多路由复用同一组件的场景

多路由使用同一组件比如:添加博客(path为:/addBlog)和编辑博客(path为:/editBlog)都对应同一个组件(EditBlog.vue)动态路由比如:用户详情页采用动态路由,其path为:/user/:id,组件都是UserDetail.vue

原因分析

        Vue中,相同的组件实例将被重复使用。如果两个路由都渲染同个组件,复用比销毁再创建更高效。不过,复用会导致组件的生命周期函数不会被调用。而我们通常会将调后端接口放到created或mounted等生命周期函数中,生命周期函数没被调用,也就无法获取后端数据。

官网网址

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化

问题复现

        本处以博客为例。添加博客(path为:/addBlog)和编辑博客(path为:/editBlog)都对应同一个组件(EditBlog.vue)

代码

路由配置(router/index.js)

import Vue from 'vue'import VueRouter from 'vue-router'import BlogEdit from '../components/BlogEdit'Vue.use(VueRouter)const routes = [ { path: '/addBlog', name: 'AddBlog', component: BlogEdit }, { path: '/editBlog', name: 'EditBlog', component: BlogEdit }]const router = new VueRouter({ routes})export default router

主页面(App.vue) 

<template> <div id="app"> <div id="nav"> <!--<router-link to="/">Home</router-link> |--> <!--<router-link to="/about">About</router-link>--> <router-link :to="{name: 'AddBlog'}">创建博客</router-link> | <router-link :to="{name: 'EditBlog'}">修改博客</router-link> </div> <router-view/> </div></template><style><!-- 省略 --></style>

博客编辑页(components/BlogEdit.vue)

<template> <div class="outer"> <div> 这是BlogEdit </div> </div></template><script>import LifeCycle from '../mixins/LifeCycle'export default { name: 'BlogEdit', mixins: [LifeCycle]}</script><style scoped>.outer { margin: 20px; border: 2px solid blue; padding: 20px;}</style>

混入生命周期(mixins/LifeCycle.js) 

我把生命周期的钩子函数单独拿了出来。

export default { computed: { name () { return this.$options.name } }, created () { console.log('created ==> ' + this.name) }, activated () { console.log('activated ==> ' + this.name) }, deactivated () { console.log('deactivated ==> ' + this.name) }, destroyed () { console.log('destroyed ==> ' + this.name) }}测试

访问:http://localhost:8080/#/

可见,除了第1次进入,之后的进入和退出没有触发相关的生命周期函数,比如:created等。 

解决方案方案1:导航守卫Vue--Router--解决多路由复用同一组件页面不刷新问题(vue-router query)

方法:在beforeRouteEnter中请求后端数据。

导航卫士钩子(mixins/NavigationGuard.js)

为便于管理,我把导航卫士单独拿出来,作为mixin给组件使用。

export default { beforeRouteEnter (to, from, next) { // 无法访问this console.log('beforeRouteEnter ==> 来自:' + from.path) console.log('beforeRouteEnter ==> 去往:' + to.path) next(true) }, beforeRouteUpdate (to, from, next) { console.log(this.$options.name + ':beforeRouteUpdate ==> 来自:' + from.path) console.log(this.$options.name + ':beforeRouteUpdate ==> 去往:' + to.path) next(true) }, beforeRouteLeave (to, from, next) { console.log(this.$options.name + ':beforeRouteLeave ==> 来自:' + from.path) console.log(this.$options.name + ':beforeRouteLeave ==> 去往:' + to.path) next(true) }}

博客编辑组件(components/BlogEdit.vue)

<template> <div class="outer"> <div> 这是BlogEdit </div> </div></template><script>import LifeCycle from '../mixins/LifeCycle'import NavigationGuard from '../mixins/NavigationGuard'export default { name: 'BlogEdit', mixins: [LifeCycle, NavigationGuard]}</script><style scoped>.outer { margin: 20px; border: 2px solid blue; padding: 20px;}</style>

测试

访问: http://localhost:8080/#/

可以发现:离开路由时会调用beforeRouteLeave,进入路由时会调用beforeRouteEnter。所以可以将调后端接口的方法放到beforeRouteEnter里边去。

方案2:watch监听$route

方法:使用watch监听$route的变化,变化时根据情况请求后端数据。

修改博客编辑组件(components/BlogEdit.vue)

<template> <div class="outer"> <div> 这是BlogEdit </div> </div></template><script>import LifeCycle from '../mixins/LifeCycle'export default { name: 'BlogEdit', mixins: [LifeCycle], watch: { $route (to, from) { console.log('组件:' + this.$options.name) console.log('来自:' + from.name) console.log('去往:' + to.name) } }}</script><style scoped>.outer { margin: 20px; border: 2px solid blue; padding: 20px;}</style>

测试

访问:http://localhost:8080/#/

可以发现:路由变化时会触发对$route的watch。所以可以将调后端接口的方法放到里边去。

方案3:父组件router-view指定key

        方法:在父组件的router-view中指定key,这个key必须是唯一的,比如:"$route.fullPath"。这样vue就会认为每个内部路由都是不同的,在跳转时便会强制刷新组件。

比如:

<router-view :key="$route.fullPath"></router-view>

修改App.vue

<router-view :key="$route.fullPath"></router-view><template> <div id="app"> <div id="nav"> <!--<router-link to="/">Home</router-link> |--> <!--<router-link to="/about">About</router-link>--> <router-link :to="{name: 'AddBlog'}">创建博客</router-link> | <router-link :to="{name: 'EditBlog'}">修改博客</router-link> </div> <!-- 原来代码 --> <-- <router-view/> --> <router-view :key="$route.fullPath"></router-view> </div></template><style><!-- 省略 --></style>

测试

访问:http://localhost:8080/#/

可以发现:可以正常触发组件的生命周期(created、destroyed)。

其他网址

Vue keepAlive实现不同的路由共用一个组件component的缓存问题_代码修整工的博客-CSDN博客

本文链接地址:https://www.jiuchutong.com/zhishi/295270.html 转载请保留说明!

上一篇:基于Springboot社区疫情防控管理系统 毕业设计-附源码164621(基于springboot的oa)

下一篇:富文本编辑器 ck-editor5 的使用(富文本编辑器和markdown编辑器的区别)

  • 支付宝怎么申请失业补助金(支付宝怎么申请商家账户)

    支付宝怎么申请失业补助金(支付宝怎么申请商家账户)

  • oppo手机重启开不了机怎么办(oppo手机重启开机显示选择语言)

    oppo手机重启开不了机怎么办(oppo手机重启开机显示选择语言)

  • 笔记本电脑返回键是哪个(笔记本电脑返回上一步)

    笔记本电脑返回键是哪个(笔记本电脑返回上一步)

  • itx机箱什么意思

    itx机箱什么意思

  • 芯片由什么物质组成(芯片的物质)

    芯片由什么物质组成(芯片的物质)

  • 联想电脑一开机就节电模式(联想电脑一开机就滴滴滴响)

    联想电脑一开机就节电模式(联想电脑一开机就滴滴滴响)

  • soul性别换不回来了(soul性别改不回来)

    soul性别换不回来了(soul性别改不回来)

  • mac能上微信打不开网页(mac电脑能上微信打不开网页怎么回事)

    mac能上微信打不开网页(mac电脑能上微信打不开网页怎么回事)

  • iphone xr和11区别(iphone xr和11哪个好)

    iphone xr和11区别(iphone xr和11哪个好)

  • 小米手机视频没有声音怎么回事(小米手机视频没删除但消失了)

    小米手机视频没有声音怎么回事(小米手机视频没删除但消失了)

  • wifi下有些app打不开(wifi下有些app打不开 移动网络正常)

    wifi下有些app打不开(wifi下有些app打不开 移动网络正常)

  • 抖音怎么分身成两个(抖音怎么分身成二个抖音号)

    抖音怎么分身成两个(抖音怎么分身成二个抖音号)

  • 苹果手机如何设置微信密码锁屏(苹果手机如何设置小圆点快捷键)

    苹果手机如何设置微信密码锁屏(苹果手机如何设置小圆点快捷键)

  • 小米回收站删除的照片能找回吗(小米回收站删除的视频能找回吗)

    小米回收站删除的照片能找回吗(小米回收站删除的视频能找回吗)

  • 智能ic卡水表显示的数字是什么(智能ic卡水表显示E—07)

    智能ic卡水表显示的数字是什么(智能ic卡水表显示E—07)

  • 苹果打开volte有什么用(iphone打开volte开关)

    苹果打开volte有什么用(iphone打开volte开关)

  • 快手动态多久清空(快手动态怎么能清零)

    快手动态多久清空(快手动态怎么能清零)

  • 小米的双4g功能是什么(小米开启双4g)

    小米的双4g功能是什么(小米开启双4g)

  • 苹果x怎么调画面清晰度(苹果x画中画怎么设置)

    苹果x怎么调画面清晰度(苹果x画中画怎么设置)

  • vivo手机怎么取消云相册(vivo手机怎么取卡出来)

    vivo手机怎么取消云相册(vivo手机怎么取卡出来)

  • 韩剧tv如何改存储位置(韩剧tv怎么修改缓存路径)

    韩剧tv如何改存储位置(韩剧tv怎么修改缓存路径)

  • 模拟示波器怎么调正弦波(模拟示波器怎么读数)

    模拟示波器怎么调正弦波(模拟示波器怎么读数)

  • 快手怎么买热门(快手怎么买热门作品)

    快手怎么买热门(快手怎么买热门作品)

  • windows光盘修复电脑(windows光盘修复电脑怎么操作)

    windows光盘修复电脑(windows光盘修复电脑怎么操作)

  • 苹果备忘录扫描后怎么存照片(苹果备忘录扫描怎么使用)

    苹果备忘录扫描后怎么存照片(苹果备忘录扫描怎么使用)

  • Dedecms织梦采集功能的使用方法教程- 图片集(二)(织梦采集器图片本地化)

    Dedecms织梦采集功能的使用方法教程- 图片集(二)(织梦采集器图片本地化)

  • 稳岗返还资金最新账务处理
  • 小微企业应纳税所得额是指什么
  • 增值税和城建税怎么算
  • 消费税征收范围包括
  • 向职工支付困难证明材料
  • 销货退回的税务处理
  • 一般纳税人科技公司发票是几个点
  • 其他应收款收到发票怎么写会计分录
  • 抄报未反写影响开票吗
  • 所有者权益变动表是什么报表
  • 外贸企业申报出口退税时的会计分录
  • 应交税费应交增值税转出多交增值税
  • 外出拓展训练活动所花的费用怎么做分录?
  • 应征消费税的汽车为啥不能抵扣
  • 公司租的员工宿舍退租,现在要开发票给人家退房租
  • 一般纳税人在国家电子税务局里面如何添加银行账户
  • 为什么有的公司没有一金
  • 代持股 税收
  • 劳务派遣税收政策文件
  • 营改增后建筑行业税率
  • 雇主责任险会计分录
  • 会计七月份忙吗
  • 费用报销单的摘要是什么意思
  • 先亏后盈法案例分析
  • 残保金每年什么时候申报缴纳
  • 计提税金及附加需要附原始凭证吗
  • 民间非营利组织会计制度会计科目
  • 高速过路费抵扣进项怎么填报
  • 鸿蒙3.0手机适配名单荣耀
  • 苹果11屏幕尺寸长宽
  • system idle process是什么进程(CPU的空闲率)
  • 如何将win11任务栏变小一点
  • PHP:Memcached::casByKey()的用法_Memcached类
  • staruml教程
  • 商业汇票贴现时贴现额的大小受贴现期长短的影响
  • 职工薪酬纳税调整明细表案例
  • 公司缴纳残保金怎么做账
  • php sw
  • 前后端分离与不分离
  • 深度学习的通道到底是什么?有什么用?(小白可看)
  • 编译原理第三版
  • 企业所得税申报表在哪里打印
  • 商品流通企业商品验收入库流程
  • 合伙企业分红怎么做账
  • 互联网+文本格式
  • 床垫发票
  • 高速费发票可以抵税吗
  • 购买税盘怎么减免申报
  • Advanced SQL Injection with MySQL
  • 暂估入库的会计分录怎么写
  • 每月扣除的公积金怎么查
  • 公司厨房用具
  • 从农民手中购买粮食税率
  • 电子增值税发票样本
  • 长期借款计提利息会计分录怎么做
  • 电子发票显示错误信息是什么原因
  • 其他债权投资发生减值会影响所有者权益总额吗
  • 冲减坏账准备的金额怎么计算
  • 支付宝如何支付医保费用
  • sqlserver存储过程怎么查看
  • u深度u盘启动盘制作工具无法进入电脑
  • win10系统如何关闭窗口特效
  • Win10 Mobile/PC build 10586.589曝光:老机型有份
  • ubuntu系统安装教程
  • mac新版系统
  • mac的100个必备小技巧
  • win7系统黑屏但电脑一直在运行
  • gnu grub卸载
  • quick cocos UIListView之isItemInViewRect方法修正
  • 简单阐述javascript的主要作用
  • HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
  • python让用户选择
  • 手游频繁崩溃怎么解决
  • jquery css hover
  • 在生成目录之前必须对相关文字设置样式
  • 拥有一个属于自己的空间高中作文
  • jquery 模态框实现
  • locust框架
  • 珠海市中心
  • 北京 国税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设