vue 路由更新页面视图未更新问题
最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化，后来上网查，发现是vue-router的特性导致的。
vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。
而我正是因为引用了相同的组件，才会发生这样的问题，根据网上的解决办法也解决了问题，现在将方法记录下。
方法一：
给
这时候路由就会更新了。不过这也就意味着需要把每个
我虽然用方法一解决了问题，但上述问题确实存在，如果我跳不同的组件的话，确实不需要担心组件更新问题。
方法二：
给
eg：
freddy nick mike if="routerAlive">
①因为router-link组件有取消点击事件，这里的.native就是为了触发组件原生标签中的事件。
②this.$nextTick(()=>{}) 的用法是等this.routerAlive = false; 触发后再执行 this.routerAlive = true; 从而起到摧毁再创建的效果。
这个方法我没有试验过，希望以后可以试试。
方案的延伸：
方案一，方案二都是通过路由的外部来更新路由的，那如果想从路由内部来更新路由呢？代码示例如下：
freddy nick mike if="routerAlive">
名字:
①、当我们点击"跳转到nick,不刷新路由" 时，会发现input的value值并没有改变
②、当我们点击"跳转到nick,并刷新路由" 时，这时候input的value值就已经改变了。
③、当我们在input中输入随便输入些数值，然后点击"跳转到本身，不刷新路由"，会发现input里面的内容没有刷新。
④、点击刷新本身就能触发刷新路由了。
上述方法利用 provide/inject 很好的从路由内部更新路由。也让我初步了解了provide/inject这一对的作用。这里记之，并附上原作链接。
---------------------
来源：CSDN
原文：https://blog.csdn.net/w390058785/article/details/82813032
转载于:https://www.cnblogs.com/feijiediyimei/p/10619373.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！