ইতিহাসে যোগ না করে কীভাবে ভ্যু-রাউটারে ঠেলবেন?

Question

আমি নিম্নলিখিত ক্রমটি ঘটছে:

• প্রধান পর্দায়

• স্ক্রীন লোড হচ্ছে

• ফলাফল পর্দা

হোমপেজে, যখন কেউ একটি বোতাম ক্লিক করে, আমি তাদের লোডিং স্ক্রিনে প্রেরণ করব:

this.$router.push({path: "/loading"});

এবং একবার তাদের কাজ শেষ হয়ে গেলে, তাদের মাধ্যমে ফলাফল স্ক্রিনে প্রেরণ করা হয়

this.$router.push({path: "/results/xxxx"});

সমস্যাটি হ'ল সাধারণত তারা ফলাফলগুলি থেকে আবার মূল স্ক্রিনে ফিরে যেতে চায় তবে তারা আবার ক্লিক করলে আবার লোডিংয়ের জন্য প্রেরণ করা হয় যা তাদের ফলাফলগুলিতে ফিরে আসে, তাই তারা অসীম লুপে আটকে থাকে এবং যেতে অক্ষম হয় প্রধান পর্দায় ফিরে।

এটা ঠিক করার কোন ধারনা তোমার আছ? আমি আদর্শভাবে পছন্দ করতাম যদি এর মতো বিকল্প থাকে:

this.$router.push({path: "/loading", addToHistory: false});

যা ইতিহাসে এটি যোগ না করে এগুলি তাদের রুটে প্রেরণ করবে।

Comments

this.$router.replace({path: "/results/xxxx"})

— রোল্যান্ড স্টার্ক

@ রোল্যান্ডস্টারকে ধন্যবাদ - এটি ব্যাক বোতামটি কাজ করে এবং মূল মেনুতে ফিরে যায়, তবে আমি ফরোয়ার্ড বোতামটি হারিয়ে ফেলে আবারও এগিয়ে যেতে পারি না - কোনও ধারণা?

— উপভোটটি ক্লিক করুন

প্রক্রিয়াটি হ'ল: প্রধান মেনু, লোড হচ্ছে, ফলাফল। আমি $router.replaceলোডিং থেকে কল করছি । এটি এখন আমাকে ফলাফলগুলি -> মূল থেকে ফিরে যেতে দেয় তবে আমি পরে ফলাফলগুলিতে যেতে পারিনি।

— ই

আরেকটি বিকল্প হ'ল লোডিং রুট না থাকা। বরং ফলাফলের রুটে সরাসরি চাপ দিন যা তৈরিতে ডেটা সংগ্রহ করে এবং তার সম্পূর্ণ হওয়া অবধি লোডিং ভিউ সরবরাহ করে। তারপরে কোনও পুনরায় রাউটিং নেই এবং ইতিহাস এবং ব্যবহারকারীর প্রবাহ $ রাউটার.রেপ্লেস ব্যতীত অক্ষত থাকতে হবে।

— অ্যারাইনাথ

@ ক্লিকউপভোটটি কি এই সমস্যার কোনও সমাধান খুঁজে

— পেয়েছেন

Answer 1

এই পরিস্থিতিটি পরিচালনা করার জন্য একটি নিখুঁত উপায় রয়েছে

গ্রানুল স্তরে রুটটি নিয়ন্ত্রণ করতে আপনি ইন-উপাদান গার্ড ব্যবহার করতে পারেন

আপনার কোডে নিম্নলিখিত পরিবর্তনগুলি করুন

প্রধান পর্দার উপাদান

উপাদানগুলির বিকল্পগুলিতে এই beofreRouteLeave গার্ডটি যুক্ত করুন, 'ফলাফল স্ক্রিনে' যাওয়ার আগে আপনি কেবল লোডিং স্ক্রিনের মাধ্যমে রুটটি সেট করছেন setting

beforeRouteLeave(to, from, next) {
   if (to.path == "/result") {
      next('/loading')
    }
    next();
  }, 

স্ক্রীন উপাদান লোড হচ্ছে

যদি রুটটি ফলাফল থেকে লোড হওয়ার দিকে পিছনে চলে যায়, তবে এটি এখানে অবতরণ করা উচিত নয় এবং সরাসরি প্রধান পর্দায় ঝাঁপ দেওয়া উচিত নয়

beforeRouteEnter(to, from, next) {
    if (from.path == "/result") {
      next('/main')
    }
     next();
  },

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

ফলাফল পর্দার উপাদান

আপনি যদি ফিরে যান ব্যবহার করেন তবে এটি লোডিংয়ের মধ্যে অবতরণ করা উচিত নয় এবং সরাসরি মূল স্ক্রিনে ঝাঁপ দেওয়া উচিত নয়

beforeRouteLeave(to, from, next) {
    if (to.path == "/loading") {
      next('/')
    }
    next();
  },

আমি একই সমস্যা পুনরুত্পাদন করার জন্য একটি ছোট মানচিত্র অ্যাপ্লিকেশন তৈরি করেছি। আপনার প্রশ্ন অনুসারে এটি আমার লোকেশনে কাজ করে। আশা করি এটি আপনার সমস্যাটিও সমাধান করবে।

Comments

এই সমাধানটি ভঙ্গুর (রক্ষণাবেক্ষণ প্রযুক্তি debtণের পরিচয় করিয়ে দেওয়া) এবং প্রতিটি সম্ভাব্য রুটের জন্য আপনার প্রয়োজনীয় প্রয়োজনগুলির জন্য এন্ট্রি প্রয়োজন।

— অ্যারেটাইনাইট

সম্পূর্ণরূপে একমত, আমি এই সমাধানটি

— মোটেও

Answer 2

আমি অনুমান করি router.replaceযেভাবে যাওয়ার উপায় - তবে এখনও চিন্তার কিছু লাইন (অপরিশোধিত):

---

মূলত $routerপরিবর্তনে এটি লোডিং-উপাদানটি নির্গত না হওয়া পর্যন্ত load:stopরেন্ডার করে, তারপরে এটি রেন্ডার করেrouter-view

---

import { Vue, Component, Watch, Prop } from "vue-property-decorator";

@Component<RouteLoader>({
    render(h){
        const rv = (this.$slots.default || [])
        .find(
            child => child.componentOptions
            //@ts-ignore 
            && child.componentOptions.Ctor.extendedOptions.name === "RouterView"
        )
        if(rv === undefined) 
            throw new Error("RouterView is missing - add <router-view> to default slot")

        const loader = (this.$slots.default || [])
        .find(
            child => child.componentOptions
            //@ts-ignore 
            && child.componentOptions.Ctor.extendedOptions.name === this.loader
        )
        if(loader === undefined) 
            throw new Error("LoaderView is missing - add <loader-view> to default slot")
        const _vm = this 
        const loaderNode = loader.componentOptions && h(
            loader.componentOptions.Ctor,
            {
                on: {
                    // "load:start": () => this.loading = true,
                    "load:stop": () => _vm.loading = false
                },
                props: loader.componentOptions.propsData,
                //@ts-ignore
                attrs: loader.data.attrs
            }
        )
        return this.loading && loaderNode || rv
    }
})
export default class RouteLoader extends Vue {
    loading: boolean = false
    @Prop({default: "LoaderView"}) readonly loader!: string
    @Watch("$route")
    loads(nRoute: string, oRoute: string){
        this.loading = true
    }
}

@Component<Loader>({
    name: "LoaderView",
    async mounted(){

        await console.log("async call")
        this.$emit("load:stop")
        // this.$destroy()
    }
})
export class Loader extends Vue {}

Comments

এটি আমি প্রয়োগ করার ধরণের কথা বলছি, যদিও আমি আমার লোডিং উপাদানটি সরাসরি আমার পৃষ্ঠার উপাদানগুলিতে প্রয়োগ করার ঝোঁক রাখি না বরং রুট পর্যবেক্ষণের মোড়ক তৈরি করি। কারণটির কারণ: আমি কঙ্কাল পদ্ধতির ব্যবহার করতে চাই যেখানে কনটেন্ট উপাদানটি আধা বোঝা অবস্থায় লোড করে ব্যবহারকারীকে কী প্রত্যাশা করা যায় তার ভিজ্যুয়াল প্রতিক্রিয়া জানাতে এবং তারপরে লোডিং উপাদানটি (যদি এটি সমস্ত ক্রিয়াকলাপটি ব্লক করা প্রয়োজন) ওভারলে করে দেয় বা ইনলাইন করে তবে ডেটা লোড হওয়ার সময় ব্যবহারকারী ইউআই ব্যবহার করতে পারে। এটি গতি সম্পর্কে ব্যবহারকারী উপলব্ধি এবং যত তাড়াতাড়ি সম্ভব তারা যা চান তার করার ক্ষমতা তাদের অবরোধ মুক্ত করার বিষয়ে।

— অ্যারেটাইনাইট

@ অ্যারাইনাটাইট ভাবনা বিমূর্তভাবে কেউ তার কোরস্প্যান্ডিং রুটের উপাদানটির সাহায্যে রাউটার-ভিউ উপাদানটি সহজেই বিনিময় করতে পারে এবং একরকম লোডার মোড়ক পেতে পারে - তবে আমি রাস্তায় লোডারটি স্থাপন করা খারাপ ডিজাইনের মতো মনে করি

— এস্ট্রাদিয়াজ

Answer 3

আপনার লোডিং রুটে কী ঘটছে সে সম্পর্কে আমরা কতটা কম জানি তা বিবেচনা করে এটি একটি শক্ত কল।

কিন্তু ...

আমার কখনও লোডিং রুট তৈরি করার প্রয়োজন হয়নি, কেবল কখনও লোডিং উপাদান (গুলি) যা ইনিশ / ডেটা সংগ্রহের পর্যায়ে একাধিক রুটে রেন্ডার হয়ে যায়।

লোডিং রুট না থাকার একটি যুক্তি হ'ল কোনও ব্যবহারকারী সম্ভবত এই ইউআরএলে (দুর্ঘটনাক্রমে) সরাসরি নেভিগেট করতে পারে এবং তারপরে মনে হয় ব্যবহারকারীকে কোথায় পাঠাতে হবে বা কী পদক্ষেপ নেবে তা জানার মতো যথেষ্ট প্রসঙ্গ নেই। যদিও এর অর্থ এই হতে পারে যে এটি এই সময়ে একটি ত্রুটিযুক্ত রুটে পড়ে। সামগ্রিকভাবে, দুর্দান্ত অভিজ্ঞতা নয়।

অন্যটি হ'ল যদি আপনি আপনার রুটগুলি সরল করেন, রুটের মধ্যে চলাচল অনেক সহজ হয়ে যায় এবং ব্যবহার না করে প্রত্যাশিত / পছন্দসই আচরণ করে $router.replace।

আমি বুঝতে পারি এটি আপনি যেভাবে জিজ্ঞাসা করছেন সেভাবে প্রশ্নটির সমাধান করে না। তবে আমি এই লোডিং রুটটি পুনর্বিবেচনা করার পরামর্শ দেব।

অ্যাপ

<shell>
    <router-view></router-view>
</shell>

const routes = [
  { path: '/', component: Main },
  { path: '/results', component: Results }
]

const router = new VueRouter({
  routes,
})

const app = new Vue({
  router
}).$mount('#app')

খোল

<div>
    <header>
        <nav>...</nav>
    </header>
    <main>
        <slot></slot>
    </main>
</div>

প্রধান পাতা

<section>
    <form>...</form>
</section>

{
    methods: {
        onSubmit() {
            // ...

            this.$router.push('/results')
        }
    }
}

ফলাফল পৃষ্ঠা

<section>
    <error v-if="error" :error="error" />
    <results v-if="!error" :loading="loading" :results="results" />
    <loading v-if="loading" :percentage="loadingPercentage" />
</section>

{
    components: {
        error: Error,
        results: Results,
    },
    data() {
        return {
            loading: false,
            error: null,
            results: null,
        }
    },
    created () {
        this.fetchData()
    },
    watch: {
        '$route': 'fetchData'
    },
    methods: {
        fetchData () {
            this.error = this.results = null
            this.loading = true

            getResults((err, results) => {
                this.loading = false

                if (err) {
                    this.error = err.toString()
                } else {
                    this.results = results
                }
            })
        }
    }
}

ফলাফলের উপাদান

মূলত আপনার কাছে ইতিমধ্যে একই ফলাফলের উপাদান রয়েছে, তবে এটি যদি loadingসত্য হয়, বা যদি resultsতা শূন্য হয় তবে আপনি পছন্দ করেন, আপনি যদি চান তবে আপনি পুনরুক্তি করতে এবং কঙ্কালের সংস্করণগুলি তৈরি করতে একটি জাল ডেটাসেট তৈরি করতে পারেন। অন্যথায়, আপনি জিনিসগুলি কেবল নিজের মতো করে রাখতে পারেন।

Comments

আমি যে লোডিং স্ক্রিনটি নিয়েছি তা পুরো স্ক্রীনটি নিয়ে যায় তাই আমি এর নিজস্ব রুট না থাকলে এটিকে প্রদর্শন করার কোনও উপায় ভাবতে পারি না। লাইভ ডেমোটির জন্য নামিনেটর.ইও দেখুন । এটি করার জন্য অন্য কোনও ধারণার জন্য উন্মুক্ত।

— ক্লিক করুন

আমি সকালে এটিকে যথাযথ চেহারা দেব, তবে আমার প্রাথমিক ধারণাটি হ'ল আপনি পর্দার দায়িত্ব গ্রহণের জন্য স্থির অবস্থানটি ব্যবহার করতে পারবেন না এমন কোনও কারণ নেই।

— অ্যারাইনাথ

আপনার নকশাটি দেখে মনে হচ্ছে কয়েকটি বিকল্প রয়েছে: আপনি ফলাফলের সামগ্রীর জায়গায় লোডারটি সরবরাহ করতে পারেন এবং তারপরে ডেটা আনার পরে স্যুইচ করতে পারেন; অথবা আপনি আপনার ফলাফলগুলির একটি কঙ্কালের লোডারকে ওভারলে করতে পারেন এবং তারপরে ফলাফলগুলি আপডেট করুন এবং পপুলেট করুন এবং লোডারটিকে অপসারণ করতে পারেন। লোডার শিরোনাম (সাইটের শেল) কভার করে না তা বিবেচনা করে আপনার অবস্থান স্থির করা উচিত নয়।

— 21:51

@ ক্লিকউপভোট আমাকে এই পদ্ধতির সম্পর্কে আপনার কেমন লাগছে তা আমাকে জানান।

— অ্যারাইকনাইট

@ অ্যারেটাইনাইট, প্রশ্নটি এই যে রুটগুলি ইতিমধ্যে বাস্তবায়িত হয়েছে এবং এটি প্রত্যাশা অনুযায়ী কাজ করছে, এই লোডিং পদ্ধতির এখানে উপযুক্ত হতে পারে না, আমি এই একই পরিস্থিতির মধ্য দিয়ে এসেছি। লোডিং রুটে পেমেন্ট গেটওয়ে বা কিছু ফর্ম পোস্ট ক্রিয়াসমূহের মতো একটি ফর্ম পোস্ট অনুরোধ থাকতে পারে। এই দৃশ্যে আমরা কোনও রুট অপসারণ করে তুলতে পারি না। তবে এখনও রউটার স্তরে আমরা রক্ষীদের প্রবেশের আগে থাকতে পারি, আমি কেন এই পদ্ধতির পরামর্শ দিয়েছি, লোডিং উপাদানটি এখনও এই হুকটিতে তৈরি করা হয়নি এবং পূর্ববর্তী রুটের উপর ভিত্তি করে এই রুটে প্রবেশ করবেন কিনা তা সিদ্ধান্ত নেওয়ার সুবিধাটি

— চ্যানেল

Answer 4

আরেকটি বিকল্প হ'ল হিস্ট্রি এপিআই ব্যবহার করা ।

আপনি একবার ফলাফলের স্ক্রিনে এলে ব্রাউজারের ইতিহাসে ইউআরএল প্রতিস্থাপন করতে আপনি রিপ্লেস্টস্টেটটি ব্যবহার করতে পারেন ।

Answer 5

এটি beforeEachরাউটারের হুক দিয়ে করা যেতে পারে ।

আপনার যা করা দরকার তা হ'ল loadingডেটা লোড করার সময় আপনাকে অবশ্যই উপাদানটি বিশ্বব্যাপী বা লোকালস্টোরারে একটি পরিবর্তনশীল সংরক্ষণ করতে হবে ( resultsউপাদানটিতে পুনঃনির্দেশের আগে ):

export default {
  name: "results",
  ...
  importantTask() {
    // do the important work...
    localStorage.setItem('DATA_LOADED', JSON.stringify(true));
    this.$router.push({path: "/results/xxxx"});
  }
}

এবং তারপরে আপনার পূর্বের প্রতিটি হুকের মধ্যে এই ভেরিয়েবলটি পরীক্ষা করা উচিত এবং সঠিক উপাদানটিতে যেতে হবে:

// router.js...
router.beforeEach((to, from, next) => {
  const dataLoaded = JSON.parse(localStorage.getItem('DATA_LOADED'));
  if (to.name === "loading" && dataLoaded)
  {
    if (from.name === "results")
    {
      next({ name: "main"} );
    }
    if (from.name === "main")
    {
      next({ name: "results"} );
    }
  }
  next();
});

এছাড়াও, mainক্যোয়ারী বোতামটি ক্লিক করা হলে ( loadingউপাদানটিতে রাউটিংয়ের আগে ) আপনার উপাদানটিতে ভুয়াতে মানটি পুনরায় সেট করতে মনে রাখবেন :

export default {
  name: "main",
  ...
  queryButtonClicked() {
    localStorage.setItem('DATA_LOADED', JSON.stringify(false));
    this.$router.push({path: "/loading"});
  }
}

Comments

এই সমাধানটি ভঙ্গুর (রক্ষণাবেক্ষণ প্রযুক্তি debtণের পরিচয় করিয়ে দেওয়া) এবং প্রতিটি সম্ভাব্য রুটের জন্য আপনার প্রয়োজনীয় প্রয়োজনগুলির জন্য এন্ট্রি প্রয়োজন।

— অ্যারেকাটাইন

Answer 6

আপনার লোডিং স্ক্রিনটি ভ্যু-রাউটারের মাধ্যমে মোটেই নিয়ন্ত্রণ করা উচিত নয়। জাভা স্ক্রিপ্ট দ্বারা নিয়ন্ত্রিত আপনার লোডিং স্ক্রিনের জন্য একটি মডেল / ওভারলে ব্যবহার করা সবচেয়ে ভাল বিকল্প। আশেপাশে প্রচুর উদাহরণ রয়েছে। যদি আপনি কিছু খুঁজে না পান তবে ভ্যু-বুটস্ট্র্যাপের প্রয়োগের জন্য কয়েকটি সহজ উদাহরণ রয়েছে।