আমাদের কি ভিউ-রাউটারে রাউটার.রেলোড আছে?

Question 1

আমি এই টান অনুরোধে দেখতে পাচ্ছি :

যুক্ত কর একটি router.reload()

বর্তমান পথ এবং পুনরায় কল ডেটা হুক দিয়ে পুনরায় লোড করুন

কিন্তু যখন আমি কোনও ভ্যু উপাদান থেকে নিম্নলিখিত কমান্ডটি জারি করার চেষ্টা করি:

this.$router.reload()

আমি এই ত্রুটি পেয়েছি:

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

আমি দস্তাবেজগুলিতে অনুসন্ধান করেছি , তবে প্রাসঙ্গিক কিছু খুঁজে পাইনি। ভ্যু / ভ্যু-রাউটার সরবরাহকারীর কি এর মতো কিছু কার্যকারিতা রয়েছে?

আমার আগ্রহী সফ্টওয়্যার সংস্করণগুলি হ'ল:

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

পুনশ্চ. আমি জানি location.reload()বিকল্পগুলির মধ্যে একটি, তবে আমি একটি নেটিভ ভ্যু বিকল্প খুঁজছি।

Question 2

this.$router.go()ঠিক এই কাজ করে; যদি কোনও যুক্তি নির্দিষ্ট না করা থাকে, রাউটারটি পৃষ্ঠাটি সতেজ করে বর্তমান অবস্থানে নিয়ে যায়।

_{দ্রষ্টব্য: রাউটারের বর্তমান বাস্তবায়ন এবং এর ইতিহাস উপাদানগুলি পরমকে alচ্ছিক হিসাবে চিহ্নিত করে না, তবে 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>

এর কারণ এটি হ'ল যদি একই উপাদানটিকে সম্বোধন করা হচ্ছে তবে ভ্যুই রাউটার কোনও পরিবর্তন লক্ষ্য করে না। কীটির সাহায্যে, পথে কোনও পরিবর্তন নতুন ডেটা সহ উপাদানটির পুনরায় লোডকে ট্রিগার করবে।

Question 4

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

ভিউ-রাউটার ডক্স:

আমি গিটহাব-এ ভিউ-রাউটার রেপো পরীক্ষা করেছি এবং দেখে মনে হচ্ছে এর আর কোনও reload()পদ্ধতি নেই। তবে একই ফাইলে রয়েছে:currentRoute অবজেক্ট।

উত্স: ভ্যু-রাউটার / 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)আপনি টাইপস্ক্রিপ্ট ব্যবহার করেন এবং ব্যবহার করার পদ্ধতিটি জিজ্ঞাসা করুন Use

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)

স্নিপেট প্রসারিত করুন

এই পদ্ধতিটি ইউআরএল প্রতিস্থাপন করে এবং ভিউ.আউটারের উপর নির্ভর না করে পৃষ্ঠাকে একটি সম্পূর্ণ অনুরোধ (রিফ্রেশ) করতে পারে। ter রাউটার.গো আমার কাছে তাত্ত্বিকভাবে ধারণা করা সত্ত্বেও একই রকম কাজ করে না।

Question 9

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

আমি বর্তমান পৃষ্ঠাটি পুনরায় লোড করার জন্য এটি চেষ্টা করেছি।

Question 10

vueObject.$forceUpdate();

আপনি জবরদস্তি পদ্ধতি ব্যবহার করবেন না কেন?

Question 11

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 12

রেন্ডার জন্য আপনি প্যারেন্ট উপাদান ব্যবহার করতে পারেন

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