vue3中,this.$router.push刷新当前页面,该页面不重新加载需要手动刷新的解决方案

// 1-demo.vue
在this.$router.push('/demo')后,demo.vue没有刷新也没有重新加载,但是路由地址已经变了,只是需要手动刷新

// 2-解决  监听一下当前路由
watch: {
  $route (to, from) {
  	// to表示要跳转的路由,from表示从哪儿跳的路由   to.path
    this.$router.go(0)
  },
},
// 以上是我目前可以解决我的问题的方法

// 以下记录百度搜到的,为了防止以后上述方法失效
// 第一种
// 1-demo.vue  在当前需要刷新的页面demo.vue中,引入router,就是我们写的路由文件
import router from '@/router/index'
console.log(router)    // 可以打印一下这个router看看

// 2-用这个路由对象去push,不要再用this了
router.push({ name: 'demo', params: { id, dataId } })

// 3-如果要获取路由传的参,就要用currentRoute,它就相当于原来的this.$route
原来获取参数: this.$route.params
现在获取参数: router.currentRouter.value.params.id

// 4-但是!使用router-link进行的路由跳转,保持不变跟原来一样
<router-link :to="{ name:'demo', params: { id, dataId } }"></router-link>

// 此种方法转载:https://blog.csdn.net/qq_42539194/article/details/113255097?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3.pc_relevant_paycolumn_v3&utm_relevant_index=5

// 第二种   该方法与我的类似,都是监听路由,只是我的监听路由,是当路由地址发生变化时,执行this.$router.go(0)再跳转一下当前页面以此代替手动刷新
而转载的这种,是监听路由,当路由地址发生变化时,执行this.xxxx()方法,重新走接口渲染列表
methods: {
  getDataList() { }
},
created() {
  this.getDataList();
},
watch: {
  // 如果路由发生变化,再次执行该方法
  '$route': 'getDataList'
}

你可能感兴趣的:(前端,node.js,ajax)