在Vue.js应用中，路由是页面之间导航的关键组成部分。然而，有时可能会遇到一个问题：当路由发生变化时，页面数据并未自动刷新。这种情况可能会影响用户体验，尤其是当你期望新路由加载时更新相应的数据。本篇文章将深入探讨如何解决Vue路由变化时页面数据不刷新的问题。
我们需要理解Vue Router的工作原理。Vue Router采用的是单页面应用程序（SPA）模式，当路由改变时，视图（View）通常应该根据新的路由参数动态更新。默认情况下，Vue Router会监听路由的变化，并尝试重新渲染组件以反映这些变化。然而，如果数据不是通过`props`传递或者在`data`选项中声明的，那么Vue可能不会自动获取或刷新数据。
问题描述：
在一个帮助页面，问题列表被动态加载，列表有多个级别。用户可以点击问题查看其详细内容。当点击一个没有子问题的问题时，会跳转到内容页。但在返回时，由于URL的参数没有正确更新，导致页面显示的还是之前的数据，而不是预期的父级问题列表。
解决方法：
1. **监听 `$route` 变化**：
在组件中，可以使用Vue的`watch`选项来监听`$route`对象的变化。当路由路径改变时，`watch`回调会被触发。在这个例子中，创建了一个名为`getStatus`的方法，它解析URL路径来获取当前路由的最后一个路径元素（在这种情况下，可能是问题的ID或父级状态）。
```javascript
watch: {
'$route' (to, from) {
console.log(this.getStatus(this.$route.path))
// 更新数据逻辑应放在这里
}
},
methods: {
getStatus (urlStr) {
var urlStrArr = urlStr.split('/')
return urlStrArr[urlStrArr.length - 1]
}
}
```
2. **更新数据**：
当路由改变时，你需要根据新的URL更新数据。这通常涉及到从服务器获取新的数据或者使用缓存的数据。在`watch`回调中，你可以调用一个方法（如`fetchData`）来获取新的问题列表，确保页面显示正确的数据。
```javascript
methods: {
fetchData() {
// 使用新的URL参数获取数据
// this.$axios.get(`your/api/${this.getStatus(this.$route.path)}`).then(response => {
// this.problems = response.data
// })
}
},
watch: {
'$route' (to, from) {
this.fetchData()
}
}
```
3. **使用 `beforeRouteUpdate` 钩子**：
另一个解决方法是使用Vue Router的生命周期钩子`beforeRouteUpdate`。这个钩子在当前组件被复用时（例如，通过`<router-link>`导航到同一路由但不同参数时）会被调用。因此，你可以在钩子内更新数据。
```javascript
beforeRouteUpdate(to, from, next) {
console.log('路由更新', to, from)
// 获取新的数据并更新组件状态
// ...
next() // 不要忘记调用next，以继续导航过程
}
```
总结，解决Vue路由变化时页面数据不刷新的问题，关键在于正确监听路由变化并及时更新组件中的数据。这可以通过`watch`、`beforeRouteUpdate`或直接在`created`钩子中处理数据请求来实现。确保每次路由变化时，组件都有正确的数据来展示，从而提供流畅的用户体验。
?jer2021-11-21根本没配图
