Chúng ta có router.reload trong vue-router không?

Tôi thấy trong yêu cầu kéo này :

• Thêm một router.reload()

  Tải lại với đường dẫn hiện tại và gọi lại móc dữ liệu

Nhưng khi tôi thử phát hành lệnh sau từ một thành phần Vue:

this.$router.reload()

Tôi gặp lỗi này:

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

Tôi đã tìm kiếm trong các tài liệu , nhưng không thể tìm thấy bất cứ điều gì có liên quan. Nhà cung cấp vue / vue-router có một số chức năng như thế này không?

Các phiên bản phần mềm mà tôi quan tâm là:

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

Tái bút. Tôi biết location.reload()là một trong những lựa chọn thay thế, nhưng tôi đang tìm kiếm một tùy chọn Vue gốc.

this.$router.go()làm chính xác điều này; nếu không có đối số nào được chỉ định, bộ định tuyến sẽ điều hướng đến vị trí hiện tại, làm mới trang.

_{lưu ý: việc triển khai hiện tại của bộ định tuyến và các thành phần lịch sử của nó không đánh dấu tham số là tùy chọn, nhưng IMVHO đó là lỗi hoặc thiếu sót thuộc về phần của Evan You, vì thông số kỹ thuật cho phép rõ ràng . Tôi đã nộp một báo cáo vấn đề về nó. Nếu bạn thực sự quan tâm đến các chú thích TS hiện tại, chỉ cần sử dụngthis.$router.go(0)}

Đối với 'tại sao nó như vậy': gonội bộ chuyển các đối số của nó đến window.history.go, vì vậy nó bằng windows.history.go()- đến lượt nó, tải lại trang, theo tài liệu MDN .

_{lưu ý: vì thao tác này thực hiện tải lại "mềm" trên Firefox dành cho máy tính để bàn thông thường (không di động), một loạt các câu hỏi kỳ lạ có thể xuất hiện nếu bạn sử dụng nhưng trên thực tế bạn yêu cầu tải lại thực sự; bằng cách sử dụng window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) được OP đề cập thay thế có thể hữu ích - nó chắc chắn đã giải quyết được các vấn đề của tôi trên FF.}

Giải pháp đơn giản nhất là thêm thuộc tính: key vào:

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

Điều này là do Bộ định tuyến Vue không nhận thấy bất kỳ thay đổi nào nếu cùng một thành phần đang được giải quyết. Với khóa, bất kỳ thay đổi nào đối với đường dẫn sẽ kích hoạt tải lại thành phần với dữ liệu mới.

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

Tài liệu Vue-Router:

Tôi đã kiểm tra repo vue-router trên GitHub và có vẻ như không còn reload()phương pháp nào nữa. Nhưng trong cùng một tệp, có: currentRouteđối tượng.

Nguồn: vue-router / src / index.js
Docs: docs

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

Bây giờ bạn có thể sử dụng this.$router.go(this.$router.currentRoute)để tải lại tuyến đường hiện tại.

Ví dụ đơn giản .

Phiên bản cho câu trả lời này:

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

Sử dụng router.go(0)nếu bạn sử dụng Typescript và nó yêu cầu đối số cho phương thức go.

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

Đó là tải lại của tôi. Bởi vì một số trình duyệt rất kỳ lạ. location.reloadkhông thể tải lại.

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

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

Giải quyết tuyến đường đến một URL và điều hướng cửa sổ bằng 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)

Phương thức này thay thế URL và khiến trang thực hiện một yêu cầu đầy đủ (làm mới) thay vì dựa vào Vue.router. $ router.go không hoạt động tương tự đối với tôi mặc dù về mặt lý thuyết nó được cho là như vậy.

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

Tôi đã thử điều này để tải lại trang hiện tại.

vueObject.$forceUpdate();

tại sao bạn không sử dụng phương thức forceUpdate?

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)

Ghi chú:

1. Và #phải có một số giá trị sau nó.
2. Băm tuyến thứ hai là một khoảng trắng, không phải chuỗi rỗng.
3. setTimeout, không phải $nextTickđể giữ cho url sạch.

Để kết xuất, bạn có thể sử dụng trong thành phần chính

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