不同路由对应同一组件页面

在vue中,当不同路由对应同一组件页面时会发生再次进入页面时不再重新渲染(为了更高效,所以vue进行了复用)的问题,整理一下解决办法,如下:

方式一、Watch监听:

watch监听路由,当路由变化则将页面的变量更改为初始值,并重新触发mounted中的方法,因为此时已不再执行mounted生命周期函数了;

或监听后使用 this.$router.go(0) 直接刷新此组件;

方式二、通过改变页面的key:

配置一个中间页,中间页可用 router-view 方式或直接引用组件作为子组件使用,两种方式都需要赋 key 值,通过改变key值来重新渲染组件;

<template>
 <router-view :key="componentKey"></router-view>
// or:<ChildCompent :key="componentKey"></ChildCompent>
</template>
...

方式三:写不同的页面:

最简单的方式就是写成不同的页面,但是当页面复杂或两个页面有相同的地方需要修改时,便十分繁杂;所以推荐将组件作为子页面,套两个父级页面,不同的路由配置到不同的父页面;

这种方式看上去比之前的方式繁杂一些,但是我在项目中使用了这种方式,因为我的项目使用了keep-alive前面两种方式都会使得页面无法缓存或清空了前一次进入时的页面缓存,而这种方式只是页面多了一点,父级页面只需引入组件,写得也不多,所以当此组件页面对应的路由不多时也是好用的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值