Vue-Router 路由参数更新,视图不更新

一个 parent.vue 页面通过 params 传递不同参数跳转到 update.vue 页,出现了参数更新,发现 update.vue 页面数据没有更新

方案一

watch (监测变化) $route 对象, 添加 query 参数

parent.vue

this.$router.push({ path: 'update', query: { 'random': Math.random() } })

update.vue

export default {
  name: 'update',
  watch: {
    '$route' (to, from) {
      // init data
      this.init()
    }
  },
  methods: {
    init () {
      // do something
    }
    
...
方案二

使用 beforeRouteUpdate 导航守卫:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Vue Router 官方说明: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

你可能感兴趣的:(Vue-Router 路由参数更新,视图不更新)