ভয়েজস: রুট পরিবর্তনের ঘটনা

Question

আমার প্রধান পৃষ্ঠায় আমার ড্রপডাউন রয়েছে যা v-show=showলিঙ্কে ক্লিক করে দেখায় @click = "show=!show"এবং আমি show=falseযখন রুট পরিবর্তন করি তখন সেট করতে চাই । কীভাবে এই জিনিসটি অনুধাবন করবেন দয়া করে আমাকে পরামর্শ দিন।

Answer 1

আপনার উপাদানটিতে এর মত একজন নজরদারি সেটআপ করুন $route:

watch:{
    $route (to, from){
        this.show = false;
    }
} 

এটি রুটের পরিবর্তনের জন্য পর্যবেক্ষণ করে এবং যখন পরিবর্তিত হয়, showমিথ্যাতে সেট করে

Comments

এবং ব্যবহার $route: function(to, from) {আপনি পুরোনো ব্রাউজারে সমর্থন করতে চান, এবং Babel ব্যবহার করছেন না পারেন।

— পল লেবিউ 12

তবে উপাদানটি প্রথমে তাত্ক্ষণিকভাবে / আরম্ভ করা হলে আমি কীভাবে অবিলম্বে রুট প্যারামগুলি বা ক্যোয়ারের প্যারামগুলিতে প্রতিক্রিয়া জানাতে পারি? আমি কি এটি তৈরি () বা মাউন্ট () বা রুরটআপ্টেট লাইফসাইকেল হুক বা এর আগে করব?

— ব্যবহারকারী 2774480

Answer 2

আপনি যদি v2.2.0 ব্যবহার করেন তবে then রুটের পরিবর্তনগুলি সনাক্ত করতে আরও একটি বিকল্প উপলব্ধ।

একই উপাদানটির প্যারাম পরিবর্তনগুলির প্রতিক্রিয়া জানাতে, আপনি কেবল $ রুট অবজেক্টটি দেখতে পারেন:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

অথবা, ২.২-তে প্রবর্তিত রৌলট আপডেট গার্ডটি ব্যবহার করুন:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

তথ্যসূত্র: https://router.vuejs.org/en/essentials/dynamic-matching.html

Comments

একটি নোট: beforeRouteUpdateকেবলমাত্র কোনও

— ভিডিয়েন্ট

Answer 3

যদি কেউ এখানে টাইপস্ক্রিপ্টে এটি কীভাবে করবেন তা সন্ধান করতে চাইলে কেবল সমাধান করুন solution

   @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: Route) {
      // Some action
    }

এবং হ্যাঁ নীচে @Coops দ্বারা উল্লিখিত হিসাবে, দয়া করে অন্তর্ভুক্ত ভুলবেন না

import { Watch } from 'vue-property-decorator';

সম্পাদনা: অ্যালক্যালেন কোনও ব্যবহার না করে রুটের ধরণটি ব্যবহারের খুব ভাল পয়েন্ট তৈরি করেছে

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

Comments

আমদানি অন্তর্ভুক্ত করতে ভুলবেন না: import { Prop, Watch } from "vue-property-decorator";

— কোপস

অবশেষে বুঝতে পেরে আমাকে ঘন্টা সময় লাগল, সেখানে কোনও ডকুমেন্টেশন আছে?

— আয়শা

একই ডক আমি পেতে পারবেন: router.vuejs.org/api/#the-route-object এছাড়াও ব্যবহারের পরিবর্তে anyটাইপ, আপনি ইন্টারফেস ব্যবহার করতে পারেন Routeথেকেimport { Route } from 'vue-router';

— Alcalyn

Answer 4

উপরের প্রতিক্রিয়াগুলি আরও ভাল, তবে কেবল সম্পূর্ণতার জন্য, আপনি যখন কোনও উপাদানটিতে রয়েছেন তখন ভিউরউটারের অভ্যন্তরে ইতিহাসের অবজেক্টটি এগুলি দিয়ে প্রবেশ করতে পারবেন: এটি $ রাউটার হিস্টোরি। এর অর্থ আমরা এর সাথে পরিবর্তনগুলি শুনতে পারি:

this.$router.listen((newLocation) =>{console.log(newLocation);})

আমি মনে করি এটির সাথে এটি ব্যবহার করার সময় এটি মূলত কার্যকর। debugger

আপনার কোডে নির্দেশ দিন এবং ক্রোম ডেভটুলস কনসোল দিয়ে খেলতে শুরু করুন।

Answer 5

গভীর অপশন সহ প্রহরী আমার পক্ষে কাজ করেনি।

পরিবর্তে, আমি আপডেট করা () লাইফসাইক্ল হুক ব্যবহার করি যা প্রতিটি সময় উপাদানটির ডেটা পরিবর্তনে কার্যকর হয়। মাউন্টযুক্ত () দিয়ে আপনি যেমন করেন তেমন এটি ব্যবহার করুন ।

mounted() {
   /* to be executed when mounted */
},
updated() {
   console.log(this.$route)
}

আপনার অবগতির জন্য, এখানে যান ডকুমেন্টেশন ।

Answer 6

টাইপসক্রিপ্ট ব্যবহারকারীর জন্য আর একটি সমাধান:

import Vue from "vue";
import Component from "vue-class-component";

@Component({
  beforeRouteLeave(to, from, next) {
    // incase if you want to access `this`
    // const self = this as any;
    next();
  }
})

export default class ComponentName extends Vue {}