位置: 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编辑器的区别)

  • 一体电脑怎么拆机(一体电脑好不好)(一体电脑怎么拆硬盘)

    一体电脑怎么拆机(一体电脑好不好)(一体电脑怎么拆硬盘)

  • 荣耀30pro有微距拍摄功能吗(荣耀30pro有微距吗)

    荣耀30pro有微距拍摄功能吗(荣耀30pro有微距吗)

  • 电脑怎么下载视频到u盘(电脑怎么下载视频音乐到U盘)

    电脑怎么下载视频到u盘(电脑怎么下载视频音乐到U盘)

  • 为什么微信打不开相册(为什么微信打不了语音电话)

    为什么微信打不开相册(为什么微信打不了语音电话)

  • 浏览器为什么不能打开网页(浏览器为什么不能下载软件)

    浏览器为什么不能打开网页(浏览器为什么不能下载软件)

  • 微信更新在哪里找(企业微信更新在哪里)

    微信更新在哪里找(企业微信更新在哪里)

  • 华为mate30pro不贴膜会有划痕吗(华为mate30pro不贴膜会刮花吗)

    华为mate30pro不贴膜会有划痕吗(华为mate30pro不贴膜会刮花吗)

  • 运算器控制器和寄存器属于什么(运算器控制器和内存储器合称为主机)

    运算器控制器和寄存器属于什么(运算器控制器和内存储器合称为主机)

  • stk-al00是什么型号(stk al00)

    stk-al00是什么型号(stk al00)

  • 快手消息怎么不显示红点(快手消息怎么不显示别人赞)

    快手消息怎么不显示红点(快手消息怎么不显示别人赞)

  • 拼多多提现网络繁忙多久解除(拼多多提现网络繁忙有解开的吗)

    拼多多提现网络繁忙多久解除(拼多多提现网络繁忙有解开的吗)

  • 小米手环深睡眠和浅睡眠怎么判断的(小米手环深睡眠一小时正常吗)

    小米手环深睡眠和浅睡眠怎么判断的(小米手环深睡眠一小时正常吗)

  • iphone5是什么时候上市的(iphone5是什么时候)

    iphone5是什么时候上市的(iphone5是什么时候)

  • beats solo3怎么关机(beatssolo3怎么关闭灯光)

    beats solo3怎么关机(beatssolo3怎么关闭灯光)

  • 淘宝怎么扫二维码(淘宝怎么扫二维码下单)

    淘宝怎么扫二维码(淘宝怎么扫二维码下单)

  • 小米手环4开机键在哪(小米手环4开机方法)

    小米手环4开机键在哪(小米手环4开机方法)

  • 小红书被限流需要多久恢复(小红书被限流会怎样)

    小红书被限流需要多久恢复(小红书被限流会怎样)

  • 饿了么骑手软件叫什么(饿了么骑手软件用什么定位骑手位置)

    饿了么骑手软件叫什么(饿了么骑手软件用什么定位骑手位置)

  • 苹果x怎么弄指纹密码(苹果x怎么弄指纹设置)

    苹果x怎么弄指纹密码(苹果x怎么弄指纹设置)

  • 手机爱奇艺怎么取消广告(手机爱奇艺怎么出示二维码让别人登录)

    手机爱奇艺怎么取消广告(手机爱奇艺怎么出示二维码让别人登录)

  • 苹果手机最上面的显示栏怎么设置(苹果手机最上面模糊怎么办)

    苹果手机最上面的显示栏怎么设置(苹果手机最上面模糊怎么办)

  • 手机私密保险箱在哪(手机上的私密保险箱是什么)

    手机私密保险箱在哪(手机上的私密保险箱是什么)

  • 基于pyecharts的中医药知识图谱可视化(pyecharts怎么用)

    基于pyecharts的中医药知识图谱可视化(pyecharts怎么用)

  • OpenAI发布GPT-4;目前最完整的ChatGPT资源库;中文版提示词工程指南;AI颠覆播客体验;ChatGPT引发的10大职业危机 | ShowMeAI日报(openai发布时间)

    OpenAI发布GPT-4;目前最完整的ChatGPT资源库;中文版提示词工程指南;AI颠覆播客体验;ChatGPT引发的10大职业危机 | ShowMeAI日报(openai发布时间)

  • pgrep命令  检索进程PID号码(pgrep命令详解)

    pgrep命令 检索进程PID号码(pgrep命令详解)

  • 金税盘技术维护费
  • 出口免税产品如何缴纳附加税
  • 当月购入固定资产计提折旧吗
  • 金融企业往来支出属于什么科目
  • 建设工程材料检测费
  • 自然人独资企业交哪些税
  • 发票进项转出账务怎么做
  • 出口退税管理系统怎么登录
  • 普通发票和专用发票的税点一样吗
  • 承包承租经营单位是什么意思
  • 异地预缴税款怎么做分录
  • 合伙企业税收优惠政策2023
  • 报税时利润表没写怎么办
  • 多交企业所得税怎么申请抵缴
  • linux转换windows
  • 负债融资的特点是什么
  • 社保缴费要和工龄一致吗
  • 固定资产清理净值是什么意思
  • 承兑托收费用
  • PHP:pg_fetch_all()的用法_PostgreSQL函数
  • php yii框架
  • php发送邮件代码
  • win7系统修改
  • php生成php文件
  • 补缴税款怎么补
  • 银行代收费收入是什么意思
  • vue中是如何划分的,每个区域的作用是什么
  • ethtool-g
  • java中的泛型的好处
  • 分公司增值税可以放总公司一起缴纳吗
  • 企业年度报告包括哪些内容
  • 累计销售额怎么算
  • powerdesigner生成pdm
  • 印花税实际缴纳时计入
  • 职业年金是什么意思?退休后怎么算职业年金?
  • 现金流量表的编制依据
  • 技术服务收入属于销售营业收入吗
  • 电子承兑汇票到期后多少天能兑现
  • 母公司和子公司是什么关系
  • 无法支付的应付账款为什么计入营业外支出
  • 收到住宿费普通发票会计分录
  • 工会经费按什么比例返还
  • 存货核算科目设置
  • 劳务派遣如何做线上业务
  • 商业会计和财务会计
  • 计提工资时个税挂其他应收款
  • 无成本票如何避税
  • 委托加工商品属于什么资产
  • 以前年度财务费用漏记
  • 暂估费用的账务处理管理
  • 收到的专项资金怎么入账
  • 用友u8怎样查询上个月凭证
  • 收入与支出怎么说
  • 当月计提公积金下月发放怎么做分录
  • 收到红字发票进项税怎么做账务处理
  • 其他货币资金属于什么类科目
  • 建设工程毛利率如何计算
  • sql server使用教程
  • MySql Error 1698(28000)问题的解决方法
  • sql将两个表的数据合并
  • mysql实用教程
  • 如何彻底释放k50至尊版性能
  • 有备而来有备而去
  • win10自定义壁纸在哪个文件夹里
  • 如何快速查询身份证号码
  • mac入门视频教程
  • linux纯文本浏览器
  • qqlogin.exe是什么进程 qqlogin.exe应用程序错误解决办法
  • window10 系统安装
  • win8安装盘
  • linux备份的文件bak如何恢复
  • win8怎么下载itunes
  • unity lightmap uv
  • 炉石传说架是什么意思
  • arm兼容库安卓x86
  • Android之Notification
  • flask框架下使用scrapy框架
  • 广告费属于什么会计科目
  • 国家税务总局2012年20号公告
  • 国税局和地税局分别征收什么税种
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设