我们希望当我们点击一个指向同一页面的router-link时，页面能够重新加载。
如何实现呢？watch->$route无法在页面保持不变的情况下调用。
如果在相同的路由中，VueJS 如何重新加载页面？
12
- Himberjack
2
我不确定这是否是您想要实现的内容：https://dev59.com/6lQJ5IYBdhLWcg3w5aMc - Jns
@Jns 路径保持不变，所以这样做行不通。 - Himberjack
8个回答
7
如果你只是想因为路由参数的变化来“刷新”组件，可以尝试以下方法：
// define a watcher
watch: {
"$route.params.id"(val) {
// call the method which loads your initial state
this.find();
},
},
"id"来自于/myroute/:id，而find()是一个普通的方法。
- Sombriks
1
JS/Vue/Trip有了一个新发现，太棒啦！:clap :clap XD - Carlos
4
其中之一的选项是在 RouterView 上使用 key：
<RouterView :key="whenThisVarChangeRouterViewWillBeRemounted" />
如果你不想在每次路由视图更改时重新加载，请确保将键放到合理的位置，否则可以使用以下方法：
:key="$router.fullPath"
这将确保在每次路径更改时重新安装。
- Perp
2
2应该使用“route”而不是“router”，但除此之外它运行得非常好！谢谢。 - Mikkel Cortnum
他要求点击路由链接，该链接指向同一页而不是具有相同组件的页面。这样做行不通。 - Pui Ho Lam
2
请为我工作 :) 将以下代码放置在router-view中
:key="$route.fullPath"
<router-view :key="$route.fullPath"/>
- Qasem
2
非常干净。我喜欢它。 - Johnny
非常好！像魔术一样工作。 - Mikkel Cortnum
2
你可以使用 "beforeEnter" 文档。
{
path: '/foo', component: Foo,
beforeEnter: (to, from, next) => {
/*
todo check if to === from
Warning!: location.reload() completely destroy all vuejs stored states
*/
window.location.reload()
return next()
}
}
- Alessio Koci
1
2我不确定如果用户在点击链接后仍停留在同一页，钩子函数是否会被调用。 - Hammerbot
1
简短回答，不需要。
你永远不需要重新渲染同一个组件。相同的路由意味着相同的组件。因此，你不能在组件中监听路由更改，因为没有任何触发器在相同的路由上。重新渲染相同的内容是一种性能浪费。你只需要在某人点击相同路由时执行一些逻辑。
你可以使用useEventBus或provide / inject从父组件向子组件传递数据。例如，在单击主页链接时重新加载查询，但不重新渲染整个子组件。
- shtse8
5
如果页面上有从网络获取的表格，用户可能希望只需单击相同的链接即可刷新表格，而无需使用单独的按钮来执行此操作。每个链接还具有基于 Web 服务提供商呈现的类似内容。因此，每个页面都应该是可重新加载的。 - Pui Ho Lam
如果您希望用户点击相同的链接以刷新页面，则应使用事件来更新更改，而不是重建整个页面。永远不要重新加载页面/组件。 - shtse8
当您更改组件上的数据时，它无论如何都会重新渲染。这仍然比用户因沮丧而按F5要快得多。问题在于开发时间，您需要编写大量用于父级和子级通信的代码，特别是当它们是路由器链接时。我有一个解决方案，可以最小化刷新页面所需的编码工作。 - Pui Ho Lam
如果你关心开发者的时间，那是没错的。但是一旦你知道如何使用事件总线来刷新数据，开发它就不会花费太多时间。最少你可以将其封装为一个函数并在需要的页面上重复使用。 - shtse8
这不仅仅是这样。点击链接并看到页面刷新一直是互联网用户从Web浏览器中期望的默认行为。如果您担心这一点，可以为仅刷新表格数据而创建一个刷新按钮。用户可能期望在页面刷新后发生新的事情，而不仅仅是数据。 - Pui Ho Lam
1
考虑在上使用@click（或@click.native）来执行自定义代码，以便在用户单击它时执行。现在，这似乎是一个坏主意，因为您将不得不在任何组件中的每个上使用该方法。解决方案是使用另一个组件方便地包装伪组件，方便地称为routerLink == 。我已经对原始的组件执行了类似的操作，效果非常好。这并不能解决导入该组件并在需要的所有组件中使用它的问题，但这意味着您有一个集中添加自定义逻辑以进行单击事件的位置，并且在需要时不会重复或在多个位置修改它。。
我现在没有可用的Vue.js项目来测试此功能，因此如果由于是伪组件而无法使用@click（.native）方法，请将事件侦听器应用于新创建的自定义组件。
- Rashad Saleh
-1
如果您希望在组件中将“route-link”修改为“this.$router.push”，并且您不想像“window.location.reload()”一样重新加载整个页面，可以考虑推送一个不存在的路由，然后立即推送相同的路由。
this.$router.push({ name: 'not existing' })
this.$router.push({ name: yourRouteName })
副作用：Vue 会在控制台中发出警告：[vue-router] Route with name 'not existing' does not exist。
- vikyd
1
这会如何影响浏览器历史记录和URL？ - Kalnode
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接