Vue.js 在vue路由器中是否有router.reload？

我从中看到：

• 添加一个

  router.reload（）

  使用当前路径重新加载并再次调用数据挂钩

但当我尝试从Vue组件发出以下命令时：

this.$router.reload()

我得到这个错误：

未捕获类型错误：此.$router.reload不是一个函数

我在网上搜索了一下，但没有找到任何相关的东西。vue/vue路由器是否提供类似的功能

我感兴趣的软件版本有：

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

另外，我知道

location.reload（）

是备选方案之一，但我正在寻找本机Vue选项

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

---

Vue路由器文档：

我在GitHub上检查了vue路由器repo，似乎再也没有

reload（）

方法了。但在同一个文件中，有：

currentRoute

object

来源：
文件：

现在您可以使用

this.$router.go（this.$router.currentRoute）

重新加载当前路由

简单

此答案的版本：

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

这个。$router.go（）

就是这样做的；如果未指定参数，路由器将导航到当前位置，刷新页面

注意：当前，不将参数标记为可选，但IMVHO这可能是一个错误，也可能是Evan You方面的遗漏，因为。如果您真正关心当前的TS注释，只需使用等效的

this.$router.go（0）

至于“为什么会这样”：

go

在内部将其参数传递给

window.history.go

，因此它等同于

windows.history.go（）

——这反过来又会根据重新加载页面

注意：由于这在常规桌面（非便携）Firefox上执行“软”重新加载，如果您使用它，可能会出现一些奇怪的怪癖，但实际上您需要真正的重新加载；使用

窗口.location.reload（true）（）可能会有所帮助-它确实解决了我在FF上的问题

最简单的解决方案是将：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
，以保持url干净
这是我的重装。因为有些浏览器很奇怪<代码>位置。重新加载

无法重新加载

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

---

对于可在父组件中使用的重新加载程序

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

内容
导出默认值{
数据（）{
返回{
renderComponent:true，
};
},
方法：{
forcerender（）{
//从DOM中删除我的组件
this.renderComponent=false；
这个.$nextTick（（）=>{
//将组件重新添加到中
this.renderComponent=true；
});
}
}
}

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

---

如果使用Typescript，则使用路由器.go（0），它会询问go方法的参数。

将路由解析为URL并使用Javascript导航窗口

让r=this.$router.resolve({
name:this.$route.name，//将您的路线信息放入
params:this.$route.params，//将路线信息放入
查询：此。$route.query//将您的路线信息放入
});
window.location.assign（r.href）

``

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

vueObject.$forceUpdate();

---

为什么不使用forceUpdate方法？

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

模板中

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

在方法上：

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

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

我从Michael Thiessen的帖子中了解到：

---

这不会刷新Safari上的任何数据。有没有办法只重新加载组件而不刷新页面？路径应该是相同的，比如说“/users”。但是当我单击“刷新”按钮时，它必须刷新整个页面，而不重新加载页面。go接受一个数字，而不是字符串。是的，它正在进行页面刷新，而不是c组件重新加载。请注意，

$router.go（）

接受一个参数，因此您应该将其用作

$router.go（0）

，这意味着在中导航零页history@DanFWIW，我要说的是，两者都是实现（例如）不要将参数标记为可选参数，这可能是Evan You的一个错误或遗漏，因为规范明确允许它（请参阅）。不过，我已经提交了一份关于它的错误报告@。

window.location.reload（forceReload）

似乎不推荐使用，但

window.location.reload（）

没问题。在官方文档中间接解释了vue中关键特殊属性的机制。这不起作用，因为在场景中OP正在讨论的完整路径不会改变。对我来说效果很好。对这个答案投了赞成票。

vueObject.$forceUpdate();

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

data() {
  return {
    forceReload: 0
  {
}

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