我们在 vue-router 中有 router.reload 吗？

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

注意：路由器及其历史组件的当前实现没有将参数标记为可选，但 IMVHO 它是 Evan You 的错误或遗漏，因为规范明确允许它。我已经提交了关于它的问题报告。如果您真的关心当前的 TS 注释，只需使用等效的 this.$router.go(0)

至于“为什么会这样”：go 在内部将其参数传递给 window.history.go，因此它等于 windows.history.go() - 这反过来又会按照 MDN doc 重新加载页面。

注意：由于这会在常规桌面（非便携式）Firefox 上执行“软”重新加载，因此如果您使用它可能会出现一堆奇怪的怪癖，但实际上您需要真正的重新加载；使用 window.location.reload(true); OP提到的（https://developer.mozilla.org/en-US/docs/Web/API/Location/reload）可能会有所帮助 - 它确实解决了我在FF上的问题。

---

最简单的解决方案是将 :key 属性添加到：

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

这是因为如果处理相同的组件，Vue Router 不会注意到任何变化。使用该键，对路径的任何更改都将触发使用新数据重新加载组件。

---

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

Vue-Router 文档：

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

来源：vue-router/src/index.js
文档：docs

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

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

简单的example。

此答案的版本：

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

---

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

---

路由器.js

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

main.js

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')

---

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

let r = this.$router.resolve({ name: this.$route.name, // 把你的路由信息放在 params: this.$route.params, // 把你的路由信息放在 query: this.$route. query // 把你的路线信息放在 }); window.location.assign(r.href)

此方法替换 URL 并导致页面执行完整请求（刷新），而不是依赖 Vue.router。 $router.go 对我来说不起作用，即使理论上应该如此。

---

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

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

---

这是我的重载。因为有些浏览器很奇怪。 location.reload 无法重新加载。

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

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

---

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

在模板中

<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

---

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 以保持 url 干净。

---

对于重新渲染，您可以在父组件中使用

<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>

---

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

<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 });
    }
  });

source

---

vueObject.$forceUpdate();

为什么不使用 forceUpdate 方法？

---

window.location.reload();

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

---