Vue下URL地址栏参数改变却不能刷新界面

• vue项目中路由跳转默认采用hash的方式，而hash的变化不会导致浏览器发送请求到服务器；
• 将获取数据的的函数的执行放在了Vue生命周期函数 mounted() 中，组件初次加载时执行了 mounted() 函数中的内容，但是再次点击时只有参数变化，组件已经挂载结束而且不会重新加载，mounted()  中的内容当然也就不会重新执行了。

 

解决方案：使用侦听器监听URL地址栏参数变化

当侦听器监听到URL地址栏参数变化时，调用获取数据列表的函数 getDate()

watch: {

    '$route' (to, from) {

        this.getData(this.$route.query.id)

    }

}

methods: {

    async getData (id) {

      // 按照id获取数据

      const { data: { result } } = await this.$http.get('getShowList', {

        params: { id }

      })

      this.dataList = result

    }

}