我们有路由器吗，在 Vue 路由器上重新加载？

小开

this.$router.go(this.$router.currentRoute)

路由器文档:

我在 GitHub 上检查了 vue-router repo，似乎没有 reload()方法了。但是在同一个文件中，有: currentRoute对象。

资料来源: Vue-router/src/index.js
文档: http://github.com/vuejs/vue-router/blob/8bdabc772065fbcba9c59318f07c09bf45769c12/Docs/en/api/router-instance.md # routercurrenroute”rel = “ noReferrer”> Docs

get currentRoute (): ?Route {
return this.history && this.history.current
}

现在可以使用 this.$router.go(this.$router.currentRoute)重新加载当前路由。

简单例子。

这个问题的答案是:

"vue": "^2.1.0",
"vue-router": "^2.1.1"

小开

this.$router.go()正是这样做的; 如果没有指定参数，路由器将导航到当前位置，刷新页面。

注意: 目前的路由器的实现和它的历史组成部分不标记为可选的参数，但 IMVHO 这是一个错误或埃文的遗漏的一部分，因为规范明确允许。如果您真的关心当前 TS 注释，只需使用等效的 this.$router.go(0)

至于‘为什么会这样’: go在内部将它的参数传递给 window.history.go，因此它等于 windows.history.go()-windows.history.go()依次重新加载页面，如 MDN 文档所示。

注意: 由于它在普通的桌面(非便携式) Firefox 上执行“软”重载，如果你使用它，可能会出现一系列奇怪的问题，但实际上你需要一个真正的重载; 使用 OP 提到的 window.location.reload(true);(https://developer.mozilla.org/en-US/docs/Web/API/Location/reload)可能会有所帮助——它确实解决了我在 FF 上的问题。

小开

最简单的解决方案是向 <router-view>添加一个 :key属性:

<router-view :key="$route.fullPath"></router-view>

这是因为如果正在寻址相同的组件，Vue 路由器不会注意到任何更改。使用该键时，对路径的任何更改都将触发用新数据重新加载组件。

小开

function removeHash () {
history.pushState("", document.title, window.location.pathname
+ window.location.search);
}




App.$router.replace({name:"my-route", hash: '#update'})
App.$router.replace({name:"my-route", hash: ' ', params: {a: 100} })
setTimeout(removeHash, 0)

备注:

#之后必须有一些值。
第二个路由散列是一个空格，而不是空字符串。
setTimeout，而不是 $nextTick保持网址清洁。

小开

这是我的重新加载。因为一些浏览器非常奇怪。 location.reload不能重新加载。

methods:{
reload: function(){
this.isRouterAlive = false
setTimeout(()=>{
this.isRouterAlive = true
},0)
}
}

<router-view v-if="isRouterAlive"/>

小开

对于重新呈现，可以在父组件中使用

<template>
<div v-if="renderComponent">content</div>
</template>
<script>
export default {
data() {
return {
renderComponent: true,
};
},
methods: {
forceRerender() {
// Remove my-component from the DOM
this.renderComponent = false;
        

this.$nextTick(() => {
// Add the component back in
this.renderComponent = true;
});
}
}
}
</script>

小开

路由器 JS

routes: [
{
path: '/',
component: test,
meta: {
reload: true,
},
}]

主要的

import router from './router';


new Vue({
render: h => h(App),
router,
watch:{
'$route' (to) {
if(to.currentRoute.meta.reload==true){window.location.reload()}
}
}).$mount('#app')

小开

如果您使用 Typecript，请使用 router.go(0)，它会询问 go 方法的参数。

小开

解析 URL 的路径并使用 Javascript 导航窗口。

        let r = this.$router.resolve({
name: this.$route.name, // put your route information in
params: this.$route.params, // put your route information in
query: this.$route.query // put your route information in
});
window.location.assign(r.href)

此方法替换 URL 并使页面执行完整请求(刷新) ，而不是依赖于 Vue.router。$Router.go 对我来说不一样，尽管理论上是这样的。

小开

<router-link
:to='`/products`'
@click.native="$router.go()"
class="sub-link"
>
</router-link>

我已经尝试过这样重新加载当前页面。

小开

vueObject.$forceUpdate();

您可以使用 forceUpdate方法。

小开

如果您只是想更新页面上的某些组件，这里有一个解决方案:

模板

<Component1 :key="forceReload" />
<Component2 :key="forceReload" />

在数据方面

data() {
return {
forceReload: 0
{
}

方法:

   Methods: {
reload() {
this.forceReload += 1
}
}

使用一个唯一的键，并将其绑定到每个要更新的数据属性(我通常只需要一个组件，最多两个组件。如果你需要更多，我建议你使用其他答案刷新整个页面。

我从 Michael Thiessen 的帖子中了解到: Https://medium.com/hackernoon/the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad

小开

window.location.reload();

您可以使用它来重新加载当前页面。 Jquery 中也有类似的用法。

小开

简单的重新加载/刷新任何组件做下面的事情

<ProductGrid v-if="renderComponent"/>


<script>
import ProductGrid from "./product-grid";
export default {
name:'product',
components: {
ProductGrid
},
data() {
return {
renderComponent: true,
};
},
methods: {
forceRerender: function() {
// Remove my-component from the DOM
this.renderComponent = false;
this.$nextTick(() => {
// Add the component back in
this.renderComponent = true;
});
}
},
watch:{
'$route.query.cid'(newId, oldId) {
if(newId>0){
this.forceRerender();
}
}
}
}
</script>

小开

找到一种方法从 Vue 路由器4的同一个源重新加载同一条路由:

import {
useRouter,
NavigationFailureType,
isNavigationFailure,
} from "vue-router";


const router = useRouter();
const handleLinkClick = (link) => {
router.push({ name: link }).then((failure) => {
if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
router.go({ name: link });
}
});

来源