vue路由跳转清空数据

修改和添加都是使用的同一个页面,在修改页直接跳转到添加页时页面数据不清空

问题代码❌

 created() {  
    this.init()
 },
  methods: {
      init(){
        if(this.$route.params && this.$route.params.id){
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
           this.getInfo(id)
        }else {
          //如果没有值则清空表单
          this.teacher= {}
        }
      }
   }

原因是created()在页面渲染之前执行一次,执行一次后不再加载了。

解决办法⚡️加上路由监听使每次跳转后都会触发init()方法进行判断清空表单

created() {
      this.init()
    },
    watch: {  //监听
      $route(to, from) { //路由变化方式,路由发生变化,方法就会执行
        this.init()
      }
    },
    methods: {
      init(){
        if(this.$route.params && this.$route.params.id){
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
           this.getInfo(id)
        }else {
          //如果没有值则清空表单
          this.teacher= {}
        }
      }
   }
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中,可以使用$route.beforeEach守卫来清空之前页面中的data数据。在beforeEach守卫中,可以获取到当前路由和之前的路由对象。在这个守卫中,可以通过访问之前路由对象中的组件实例来清空数据。具体实现方法如下: 首先,在路由配置中注册一个beforeEach守卫: ``` const router = createRouter({ history: createWebHashHistory(), routes, }) router.beforeEach((to, from, next) => { // 在这里清空之前页面中的data数据 next() }) ``` 然后,在beforeEach守卫中访问之前路由对象中的组件实例,通过将组件实例中的data数据重置为默认值来清空数据。具体代码如下: ``` router.beforeEach((to, from, next) => { if (from && from.fullPath !== '/') { // 获取之前页面中的组件实例 const prevInstance = from.matched[0].instances.default // 重置组件实例中的data数据 Object.assign(prevInstance.$data, prevInstance.$options.data()) } next() }) ``` 在上面的代码中,我们判断了之前的路由对象是否存在,以及之前的路由是否是根路由。如果之前的路由不是根路由,我们就可以通过访问之前路由对象中的组件实例来清空数据。我们通过从组件实例中获取$options对象,然后调用其data函数来获取组件的默认data数据,并使用Object.assign方法将其赋值给组件实例中的$data对象,从而重置了组件实例中的data数据。 最后,需要注意的是,这种方法只会清空组件实例中的data数据,而不会清空其他状态,例如computed属性或者watch监听器。如果需要清空其他状态,需要在组件中手动实现。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值