vue动态路由:路由参数改变,视图不更新问题的解决-创新互联

问题描述:

创新互联2013年至今,先为六盘水等服务建站,六盘水等地企业,进行企业商务咨询服务。为六盘水企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下:

vue动态路由:路由参数改变,视图不更新问题的解决

原因分析:

具体原因在vue官方文档:响应路由参数的变化一节中有讲过:

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象

(摘自vue文档)

解决办法:

方法一: watch (监测变化) $route 对象

watch: {
  '$route' (to, from) {
   // 监听路由的变化,做你想做的一些事情...
   // this.init()
  }
},

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章名称:vue动态路由:路由参数改变,视图不更新问题的解决-创新互联
当前URL:http://hbruida.cn/article/hjijp.html