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

175 阅读1分钟

一个 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 官方说明: router.vuejs.org/zh/guide/es…