vue-router中是否有router.reload?

vue.js Vue.js

理查德Itachi

2020-03-11

我在此拉取请求中看到

  • 添加一个 router.reload()

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

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

this.$router.reload()

我收到此错误:

Uncaught TypeError: this.$router.reload is not a function

我在docs中进行了搜索,但未找到任何相关内容。vue / vue-router是否提供某些这样的功能?

我感兴趣的软件版本是:

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

PS。我知道这location.reload()是替代方法之一,但我正在寻找本机Vue选项。

第579篇《vue-router中是否有router.reload?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

8个回答
乐蛋蛋 2020.03.11

For rerender you can use in parent component

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

解析到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)

This method replaces the URL and causes the page to do a full request (refresh) rather than relying on Vue.router. $router.go does not work the same for me even though it is theoretically supposed to.

樱Harry 2020.03.11

使用router.go(0)如果使用 TypeScript,并且它要求的参数为细末方法。

Near神乐路易 2020.03.11

这是我的重载。由于某些浏览器很奇怪。location.reload无法重新加载。

methods:{
   reload: function(){
      this.isRouterAlive = false
      setTimeout(()=>{
         this.isRouterAlive = true
      },0)
   }
}
<router-view v-if="isRouterAlive"/>
理查德神乐老丝 2020.03.11

这就是我的方法!

methods:
{
        reload()
        {
            var location = this.$route.fullPath

            this.$router.replace('/')

            this.$nextTick(() => this.$router.replace(location))
        }
}
梅乐 2020.03.11

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

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

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

SamStafan 2020.03.11

我在GitHub上检查了vue-router回购,似乎不再有reload()任何方法。但在同一文件中有:currentRoute对象。

来源:vue-router / src / index.js
文件: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"
小宇宙樱 2020.03.11

this.$router.go()正是这样做的;如果未指定任何参数,则路由器导航到当前位置,刷新页面。

注:目前执行的路由器它的历史分量不标记帕拉姆为可选,但IMVHO它要么错误或埃文您的部分不作为,因为该规范明确允许我已经提交了一个问题报告。如果您真的担心当前的TS批注,请使用等效的this.$router.go(0)

至于“为什么会这样”:在go内部将其参数传递给window.history.go,因此其等于windows.history.go()-进而根据MDN doc重新加载页面

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android