标签：vue route router 地址栏 路由 页面

在开发中，难免会遇上各种问题，今天讲解一下，在vue项目中，只改变路由中的参数，路由地址不改变页面数据不刷新问题；
造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。

解决方法：

1：监听地址栏变化（watch）,这是vue-router官方给出的解决办法。

监听路由变化，把初始化的方法重新写到监听的方法里面执行

watch: {
    $route(to, from) {
        if (this.$route.query.参数) {
             重新加载一次created或者mounted钩子中的渲染的数据
        }
      },
    // 或者
    $route(){
         if (this.$route.query.参数) {
             重新加载一次created或者mounted钩子中的渲染的数据
         }
       }, 
    },

2：给router-view加个唯一的key，来保证路由切换时都会重新渲染触发钩子了（这个方法是我在收集资料的时候看别人文章发现的）

个人更倾向于第二种简单省事，第一种要是有多个页面共用，就要多次写监听

标签：vue,route,router,地址栏,路由,页面
来源： https://www.cnblogs.com/leng12/p/Xleng.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。