क्या हमारे पास v.- राउटर में राऊटर है।

Question 1

मैं इस पुल अनुरोध में देखता हूं :

एक जोड़ें router.reload()

वर्तमान पथ के साथ पुनः लोड करें और डेटा हुक को फिर से कॉल करें

लेकिन जब मैं एक Vue घटक से निम्न आदेश जारी करने का प्रयास करता हूं:

this.$router.reload()

मुझे यह त्रुटि मिली:

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

मैंने डॉक्स में खोज की , लेकिन प्रासंगिक कुछ भी नहीं पाया। क्या vue / vue- राउटर प्रदाता इस तरह से कुछ कार्यक्षमता प्रदान करता है?

सॉफ्टवेयर संस्करणों में मेरी दिलचस्पी है:

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

पुनश्च। मुझे पता location.reload()है कि विकल्पों में से एक है, लेकिन मैं एक देशी Vue विकल्प की तलाश कर रहा हूं।

Question 2

this.$router.go()ठीक यही करता है; यदि कोई तर्क निर्दिष्ट नहीं किया जाता है, तो राउटर पृष्ठ को ताज़ा करते हुए वर्तमान स्थान पर पहुँच जाता है।

_{ध्यान दें: राउटर का वर्तमान कार्यान्वयन और इसके इतिहास घटक परम को वैकल्पिक के रूप में चिह्नित नहीं करते हैं, लेकिन IMVHO यह या तो एक बग है या इवान यू के हिस्से पर एक चूक है, क्योंकि कल्पना स्पष्ट रूप से इसकी अनुमति देती है । मैंने इसके बारे में एक समस्या रिपोर्ट दर्ज की है। यदि आप वर्तमान टीएस एनोटेशन से वास्तव में चिंतित हैं, तो बस समकक्ष का उपयोग करेंthis.$router.go(0)}

जैसा कि 'ऐसा क्यों है': goआंतरिक रूप से अपने तर्कों को पास करता है window.history.go, इसलिए इसके बराबर windows.history.go()- जो, बदले में, पृष्ठ को पुनः लोड करता है, जैसा कि एमडीएन डॉक्टर के अनुसार ।

_{नोट: चूंकि यह नियमित डेस्कटॉप (गैर-पोर्टेबल) फ़ायरफ़ॉक्स पर "सॉफ्ट" रीलोड को निष्पादित करता है, यदि आप इसका उपयोग करते हैं तो अजीब विचित्रता का एक गुच्छा दिखाई दे सकता है, लेकिन वास्तव में आपको एक सच्चे लोड की आवश्यकता होती है; इसके बजाय ओपी द्वारा उल्लिखित window.location.reload(true);( https://developer.mozilla.org/en-US/docs/Web/API/Location/reload ) का उपयोग करने से मदद मिल सकती है - यह निश्चित रूप से एफएफ पर मेरी समस्याओं को हल करता है।}

Question 3

सबसे सरल उपाय यह है:

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

ऐसा इसलिए है क्योंकि Vue Router किसी भी बदलाव को नोटिस नहीं करता है यदि उसी घटक को संबोधित किया जा रहा है। कुंजी के साथ, पथ में कोई भी परिवर्तन नए डेटा के साथ घटक के पुनः लोड को ट्रिगर करेगा।

Question 4

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

Vue-Router डॉक्स:

मैंने गिटहब पर वी-राउटर रेपो की जाँच की और ऐसा लगता है कि कोई 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"

Question 5

का प्रयोग करें router.go(0)अगर आप टाइपप्रति का उपयोग, और यह जाने विधि के लिए बहस पूछ रहा है।

Question 6

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

Question 7

यह मेरा भार है। क्योंकि कुछ ब्राउज़र बहुत अजीब हैं। location.reloadपुनः लोड नहीं किया जा सकता।

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

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

Question 8

URL के लिए मार्ग को हल करें और जावास्क्रिप्ट के साथ विंडो को नेविगेट करें।

        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 पर निर्भर करने के बजाय पूर्ण अनुरोध (रिफ्रेश) करने का कारण बनती है। $ राऊटर.ओगो मेरे लिए उतना ही काम नहीं करता है जबकि यह सैद्धांतिक रूप से माना जाता है।

Question 9

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

मैंने वर्तमान पृष्ठ को पुनः लोड करने के लिए यह कोशिश की है।

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

टिप्पणियाँ:

और #इसके बाद कुछ मूल्य होना चाहिए।
दूसरा मार्ग हैश एक स्थान है, खाली स्ट्रिंग नहीं।
setTimeout, $nextTickयूआरएल को साफ रखने के लिए नहीं ।

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

Question 12

vueObject.$forceUpdate();

आप बलप्रयोग विधि का उपयोग क्यों नहीं करते?