一、前言

下拉选择，根据不同的值展示不同的内容，初次点击可以获取到相应的值，但是当第二次点击时，虽然地址栏的参数改变了，但页面内容并没改变。

• URL 如下：
  http://127.0.0.1:8080/#/user?hobby=study
http://127.0.0.1:8080/#/user?hobby=play

二、原因

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

三、解决

• 使用 watch 监听 URL地址栏 参数变化
• js 代码如下：

<script>
import axios from 'axios'
export default {
    data() {
        return {
			list: [],
            hobby: 'study'
        }
    },
    mounted() {
        this.getHobby(this.hobby); //调用爱好获取方法
    },
	watch: {
		'$route' (to, from) { //监听URL地址栏参数变化
			let queryHobby = this.$route.query.hobby;
			if (queryHobby) {
				this.getHobby(queryHobby)
			}
		}
	},
    methods: {
        getHobby(hobby) { //接口获取爱好数据
            axios({
                url: 'http://***.com/hobby/lists',
                method: 'GET',
                params: {hobby: hobby}
            }).then(res => {
                this.list = res.data.data; //获取接口中的数据，并赋值
            })
        }
    }
}
</script>

最后

以上就是犹豫小猫咪为你收集整理的Vue下URL地址栏参数改变却不能刷新界面一、前言二、原因三、解决的全部内容，希望文章能够帮你解决Vue下URL地址栏参数改变却不能刷新界面一、前言二、原因三、解决所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。