我们希望当我们点击一个指向同一页面的router-link时,页面能够重新加载。
如何实现呢?watch->$route
无法在页面保持不变的情况下调用。
我们希望当我们点击一个指向同一页面的router-link时,页面能够重新加载。
如何实现呢?watch->$route
无法在页面保持不变的情况下调用。
// define a watcher
watch: {
"$route.params.id"(val) {
// call the method which loads your initial state
this.find();
},
},
"id"来自于/myroute/:id,而find()是一个普通的方法。
其中之一的选项是在 RouterView 上使用 key:
<RouterView :key="whenThisVarChangeRouterViewWillBeRemounted" />
如果你不想在每次路由视图更改时重新加载,请确保将键放到合理的位置,否则可以使用以下方法:
:key="$router.fullPath"
这将确保在每次路径更改时重新安装。
请为我工作 :) 将以下代码放置在router-view中
:key="$route.fullPath"
<router-view :key="$route.fullPath"/>
{
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()
}
}
简短回答,不需要。
你永远不需要重新渲染同一个组件。相同的路由意味着相同的组件。因此,你不能在组件中监听路由更改,因为没有任何触发器在相同的路由上。重新渲染相同的内容是一种性能浪费。你只需要在某人点击相同路由时执行一些逻辑。
你可以使用useEventBus或provide / inject从父组件向子组件传递数据。例如,在单击主页链接时重新加载查询,但不重新渲染整个子组件。
this.$router.push({ name: 'not existing' })
this.$router.push({ name: yourRouteName })
副作用:Vue 会在控制台中发出警告:[vue-router] Route with name 'not existing' does not exist
。