我們在 vue-router 中有 router.reload 嗎？

Question

我在這個拉取請求中看到：

• 添加一個router.reload()

  重新加載當前路徑並再次調用數據掛鈎

但是當我嘗試從 Vue 組件發出以下命令時：

this.$router.reload()

我收到此錯誤：

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

我在文檔中搜索，但找不到任何相關內容。 vue/vue-router 是否提供了這樣的功能？

我感興趣的軟件版本是：

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

附言。 我知道location.reload()是備選方案之一，但我正在尋找原生 Vue 選項。

Answer 1

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); （ https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ）OP提到的可能會有所幫助 - 它確實解決了我在FF上的問題。

Answer 2

最簡單的解決方案是將 :key 屬性添加到：

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

這是因為如果處理相同的組件，Vue Router 不會注意到任何變化。 使用該鍵，對路徑的任何更改都將觸發使用新數據重新加載組件。

Answer 3

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

---

Vue-Router 文檔：

我在 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"

Answer 4

如果您使用 Typescript，請使用router.go(0) ，它會詢問 go 方法的參數。

Answer 5

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

Answer 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 對我來說不起作用，即使理論上應該如此。

Answer 7

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

我已經嘗試過重新加載當前頁面。

Answer 8

這是我的重載。 因為有些瀏覽器很奇怪。 location.reload無法重新加載。

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

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

Answer 9

如果您只想更新頁面上的某些組件，這是一個解決方案：

在模板中

<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

Answer 10

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

Answer 11

對於重新渲染，您可以在父組件中使用

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

Answer 12

2021 年 9 月更新：

您可以通過添加:key="$route.fullPath"來強制重新加載組件。

對於子組件：

<Child :key="$route.fullPath" />

對於路由器視圖標簽：

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

但是， :key="$route.fullPath"只能強制重新加載不同路由的組件，而不能強制重新加載同一路由的組件。 為了能夠強制重新加載同一路由的組件，我們需要向:key=添加一個值並更改該值。

*我們可以將Array分配給:key= 。

<template>
  <Child 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @childReload="reload" // Call @click="$emit('childReload')" in   
  />                      // Child Component to increment the value.
</template> 

    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR

<template>
  <router-view 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')"
  />                           // in Child Component to increment the value.
</template>
    
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    reload() {
      this.value++;
    }
  }
}
</script>

但是，為了繼續同時使用$route.fullPath和value有時會導致一些錯誤，因此只有在發生諸如Click 之類的事件時，我們才同時使用$route.fullPath和value 。 除了像Click這樣的事件發生時，我們總是只需要使用$route.fullPath 。

這是最終的代碼：

<template>
  <Child 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @childReload="reload" // Call @click="$emit('childReload')" in
  />                      // Child Component to increment the value.
</template>
    
    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR
    
<template>
  <router-view 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')" in
  />                           // Child Component to increment the value.
</template>
        
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      state: true,
      value: 0,
    };
  },
  methods: {
    reload() {
      this.state = false;
      this.value++;
      this.$nextTick(() => this.state = true);
    }
  }
}
</script>

不幸的是，在 Vue 中沒有簡單的方法可以正確地強制重新加載組件。 這就是Vue需要解決的問題。

Answer 13

簡單的重新加載/刷新任何組件做下面的事情

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

Answer 14

這就是我的方法！

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

            this.$router.replace('/')

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

Answer 15

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

資源

Answer 16

這個答案幫助了我：

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

它首先重定向到/home ，然后重新加載頁面。 幫助在登錄后獲取更新的導航欄。

Answer 17

vueObject.$forceUpdate();

為什么不使用 forceUpdate 方法？

Answer 18

window.location.reload();

您可以使用它重新加載當前頁面。 Jquery 中也有類似的用法。