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= {}}}}

vue路由跳转清空数据相关推荐

vue 路由跳转页面数据不更新问题
由于 router-view 使用了 keep-alive组件,被缓存了. 原因:vue-router的切换不同于传统的页面切换,而是路由之间的切换,其实就是组件之间的切换,引用相同组件的时候,会直 ...
vue路由跳转回退后页面不刷新处理
vue路由跳转回退后页面不刷新处理 ·利用keep-alive 缓存需要缓存的页面具体实现流程 1.在app.vue中改写router-view <keep-alive><rout ...
Vue路由跳转时导航栏更新
Vue路由跳转时导航栏更新问题描述在调用函数中跳转路由,但是侧边栏没有更新激活的高亮状态排查查看路由跳转后,侧边栏中active_index的session储存正常由于侧边栏由组件引入,所以 ...
Vue路由跳转与接收参数
Vue路由跳转与接收参数一.路由跳转四种方式 (带参数) 1) router-link 1.不带参数 <router-link :to="{name:'home'}"> ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
vue 路由跳转并打开新页面
let id ='123'; const {href} = this.$router.resolve( { path: '/home/test',query: {id: id}} ) window.o ...
vue路由跳转报错解决
vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
工作112:vue路由跳转错误：Error: Redirected when going from “/login“ to “/home“ via a navigation guard.
vue路由跳转错误:Error: Redirected when going from "/login" to "/home" via a navigation ...
vue路由跳转返回上一级
vue路由跳转,返回上一级 this.$router.go(-1)

vue路由跳转清空数据

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

vue路由跳转清空数据相关推荐

最新文章

热门文章