在 Vue.js 的开发中，我们经常会使用路由来实现页面之间的跳转。但是，有时候我们会发现在路由跳转后，页面并没有刷新，导致页面的数据没有更新，这时候我们就需要解决这个问题。
问题分析
在 Vue.js 中，路由跳转并不会刷新页面，这是因为 Vue.js 是一款单页面应用框架，所有的页面都是在同一个页面中进行渲染的。当我们使用路由跳转时，只是改变了路由的状态，而没有重新加载页面，因此页面中的数据并没有得到更新。
解决方案
使用 watch 监听路由变化
我们可以使用 Vue.js 中的 watch 方法来监听路由的变化，当路由变化时，我们可以在 watch 方法中执行相应的操作，例如重新获取数据并更新页面。
watch: {
$route: {
handler: function (to, from) {
// 在这里执行相应的操作
},
immediate: true
}
}上面的代码中，我们使用了 $route 属性来监听路由的变化，当路由变化时，handler 函数会被调用。
使用 beforeRouteUpdate 钩子函数
在 Vue.js 中，我们可以使用 beforeRouteUpdate 钩子函数来监听路由的变化。当路由变化时，beforeRouteUpdate 钩子函数会被调用，在这个钩子函数中我们可以执行相应的操作，例如重新获取数据并更新页面。
beforeRouteUpdate (to, from, next) {
// 在这里执行相应的操作
next()
}使用 key 属性强制更新组件
我们还可以使用 Vue.js 中的 key 属性来强制更新组件。当我们使用 key 属性时，每次组件更新时，Vue.js 会认为这是一个新的组件，从而强制重新渲染组件。
-- -------------------- ---- -------
----------
---- --------------------
---- ---- ---
------
-----------
--------
------ ------- -
---- -- -
------ -
------------- -
-
--
-------- -
---------------- -- -
----------------- -- -
-
-
-
---------上面的代码中，我们在组件的根元素上使用了 key 属性，并将其绑定到了 componentKey 变量上。当我们需要强制更新组件时，只需要调用 refreshComponent 方法即可。
示例代码
下面是一个示例代码，展示了如何使用 watch 方法来监听路由的变化，并重新获取数据并更新页面。
-- -------------------- ---- -------
----------
-----
---- ---- ---
------
-----------
--------
------ ------- -
---- -- -
------ -
----- ----
-
--
------ -
------- -
-------- -------- ---- ----- -
--------------
--
---------- ----
-
--
-------- -
------- -- -
-- -------
--------- - -------
-
-
-
---------总结
在 Vue.js 中，路由跳转后页面不刷新的问题是比较常见的，但是我们可以使用上述的方法来解决这个问题。使用 watch 方法、beforeRouteUpdate 钩子函数或 key 属性都可以达到重新渲染页面的效果。在实际开发中，我们需要根据具体的情况选择合适的方法来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513ef5a95b1f8cacdc67600