vue-router 中有 router.reload 吗？

问题描述 投票：0回答：19

我在这个拉取请求中看到了：

  • 添加一个

    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 选项。

javascript node.js vue.js vue-router reload
19个回答
274
投票

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

注意：当前路由器的实现和其历史组件未将参数标记为可选，但IMVHO这要么是Evan You的错误或遗漏，因为规范明确允许它。 我已经提交了一份有关它的问题报告。如果您确实关心当前的 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上的问题。

83
投票

最简单的解决方案是为 

:key
添加 
<router-view>
属性：

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

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

53
投票
this.$router.go(this.$router.currentRoute)

Vue-路由器文档：

我检查了 GitHub 上的 vue-router repo，似乎已经没有 

reload()
方法了。但在同一个文件中，有： 
currentRoute
对象。

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

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

现在您可以使用

this.$router.go(this.$router.currentRoute)
重新加载当前路线。

简单示例。

此答案的版本：

"vue": "^2.1.0",
"vue-router": "^2.1.1"
14
投票

如果您使用 Typescript，请使用 

router.go(0)
，并且它会询问 go 方法的参数。

9
投票

路由器.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')
6
投票

解析 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 对我来说效果不一样，尽管理论上应该如此。

6
投票

一个简单的例子：

this.$router.go(0)

这里是文档： https://router.vuejs.org/guide/essentials/navigation.html#traverse-history

3
投票

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

在模板中

<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

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

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

2
投票

这是我的重载。因为有些浏览器很奇怪。 

location.reload
无法重新加载。

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

<router-view v-if="isRouterAlive"/>
1
投票
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)

备注：

  1. 并且 
    #
    之后必须有一些值。
  2. 第二个路由哈希是一个空格，而不是空字符串。
  3. setTimeout
    ，而不是 
    $nextTick
    ，以保持网址干净。
1
投票

简单地重新加载/刷新任何组件，执行以下操作

<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>
1
投票

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

<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>
0
投票

找到了一种在 vue router 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 });
    }
  });

来源

0
投票

这个答案帮助了我：

 this.$router
          .push({ path: '/home' })
          .then(() => { this.$router.go() })

它首先重定向到 

/home
，然后重新加载页面。帮助登录后更新导航栏。

0
投票

我有两种重新加载路线的方法。

1.使用第二个空白页刷新。

如果我们想刷新页面A。

 // at A page, go to blank page
 route.push('/blank')
 // at black page, go to A page
 route.push('/A')

2.使用 
v-if
刷新路线

  • js
  // at vue3 
  const componentVisible = ref(true)

  const refresh = () => {
    componentVisible.value = false
    nextTick(() => {
      componentVisible.value = true
    })
  }
  • 模板
<button @click="refresh">click to reload</button>

<div v-if="componentVisible" class="panel-content">
  <router-view></router-view>
</div>
-2
投票

如果您想重新加载页面，只需执行以下操作：

window.location.reload()
-4
投票
vueObject.$forceUpdate();

您可以使用

forceUpdate
方法。

-5
投票
window.location.reload();

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.