প্রদত্ত ব্রাউজার ইউআরএল দ্বারা শুরুতে পুনর্নির্দেশ

Question

আমি একটি বেস পাথ দিয়ে একটি নতুন ভ্যু অ্যাপ তৈরি করেছি। অ্যাপটি অন্য ভ্যু অ্যাপ্লিকেশনটিতে এম্বেড হওয়ার কারণে, এই অ্যাপ্লিকেশনটি router-viewপ্রারম্ভকালে রেন্ডার করে না । এই অ্যাপটি কীভাবে বা অন্য অ্যাপটিতে এম্বেড করা হয়েছে সে সম্পর্কে আপনি যদি আরও জানতে চান তবে দয়া করে এখানে একবার দেখুন:

প্রধান ভ্যু অ্যাপ্লিকেশনটির ধারক মধ্যে ভ্যু অ্যাপ্লিকেশনগুলি মাউন্ট করুন

এবং এই সমস্যার আমার নিজস্ব উত্তর:

https://stackoverflow.com/a/58265830/9945420

আমার অ্যাপ্লিকেশন শুরু করার সময়, এটি ব্যতীত সমস্ত কিছুই রেন্ডার করে router-view। আমি প্রদত্ত ব্রাউজার ইউআরএল দ্বারা শুরুতে পুনর্নির্দেশ করতে চাই। এটি আমার রাউটার কনফিগারেশন:

import Vue from 'vue';
import Router from 'vue-router';

import One from './views/One.vue';
import Two from './views/Two.vue';

Vue.use(Router);

const router = new Router({
    base: '/my-embedded-app/',
    mode: 'history',
    routes: [
        {
            path: '/',
            component: One,
        },
        {
            path: '/two',
            component: Two,
        },
    ],
});

router.replace(router.currentRoute.fullPath);

export default router;

আমি অ্যাপ্লিকেশন উপাদান প্রদান করতে চান দুই যখন কলিং .../my-embedded-app/two। দুর্ভাগ্যক্রমে, router.replaceসর্বদা পুনর্নির্দেশ করা হয় /(তাই ব্রাউজারের URL টি .../my-embedded-app/)। আমি ডিবাগ করেছিলাম routerএবং দেখেছি যে পথটি রয়েছে /তবে আমি এটির আশা করব /two।

গুরুত্বপূর্ণ দ্রষ্টব্য: আমি /twoযখনই ইউআরএল থাকি তখন ব্যবহারকারীকে পুনর্নির্দেশ করতে চাই না /। Twoইউআরএল হলে আমি কেবল ভিউ রেন্ডার করতে চাই /two। বর্তমানে তা হয় না।

কী ভুল হতে পারে? হতে পারে আমার সেই পুনঃনির্দেশের প্রয়োজনও নেই এবং সমস্যাটিকে আরও মার্জিত উপায়ে সমাধান করতে পারেন।

Comments

আপনি কি বলতে চাইছেন - আপনি যখন / - আমার-এমবেডড-অ্যাপ / ইউআরএল হিসাবে এবং এক / দুটি আমার / এমবেডড-অ্যাপ / দুটির জন্য উপাদান দুটি লিখবেন তখন আপনি একটি উপাদান রেন্ডার করতে চান? যদি হ্যাঁ, আপনি কি চেষ্টা করেছেন - {পথ: 'দুই', উপাদান: দু'টি, '/' থেকে '/' অপসারণ করছেন

— উর্বশী

হ্যাঁ অবশ্যই. আমি আপনার পদ্ধতির চেষ্টা করেছি কিন্তু তারপরে আমি একটি সতর্কতা পেয়েছি যে এই রুটে একটি নেতৃস্থানীয় স্ল্যাশ ব্যবহার করতে হবে। অ্যাপ্লিকেশনটি চালানোর সময় এই রুটটি তখন কাজ করে না ..

— hrp8sfH4xQ4

আপনি কি আপনার রুটের ক্রম পরিবর্তন করতে পারেন?

— ভেরিয়েবলবাসাসমটিটি

Answer 1

এটি সাধারণ আচরণ, এটি একক পৃষ্ঠার অ্যাপ্লিকেশনটির কাজ। "পাউন্ড" - যেমন # - চিহ্ন মানে লিঙ্কগুলি অ্যাপ্লিকেশনটিকে অন্য পৃষ্ঠায় সরিয়ে দেবে না।

যাতে আপনি রাউটার মোডে পরিবর্তন করতে পারেন

mode:"hash"

Answer 2

আপডেট হয়েছে: jsfiddle

কী ঘটছে তা route.currentRoute.fullPathরাউটার প্রস্তুত হওয়ার আগেই কার্যকর করা হয়েছিল।

Comments

এটি কোনও পরিবর্তন করেনি। কল করার পরিবর্তে router.currentRoute.fullPathএখনও ফিরে আসে//twolocalhost:3000/apps/my-embedded-app/two

— hrp8sfH4xQ4

চেষ্টা করুনrouter.onReady(() => { router.replace(router.currentRoute.fullPath); });

— ভেরিয়েবলবাসাসম্টটি

দুঃখিত যে কাজ করে না। আমি যখন অনারডি ইভেন্টটি ব্যবহার করি তখনও আমি এই ত্রুটিটি message: "Navigating to current location ("/subApps/app-one") is not allowed"

— পেয়েছি

@ hrp8sfH4xQ4 আমি আপনাকে একটি জিসফিল তৈরি করার পরামর্শ দিচ্ছি এবং আপনার যা প্রয়োজন ঠিক তা ব্যাখ্যা করুন এবং লোকেরা আপনার জন্য এটি পরিবর্তন করতে পারে, আমরা ঠিক সমস্যার পুনরুত্পাদন করতে পারি না।

— পরিবর্তনশীল

দুঃখিত, আমি এটিকে একটি পোকার সাথে পুনরুত্পাদন করতে পারি না। আইফ্রেম ধারকটির জন্য একটি ফাইলসভার প্রয়োজন। তবে এটি github.com/byteCrunsher/router-startup

— hrp8sfH4xQ4

Answer 3

ব্যবহার করে দেখুন beforeEnter। নীচের কোডটি দেখুন:

const router = new Router({
  base: "/my-embedded-app/",
  mode: "history",
  routes: [
    {
      path: "/",
      component: One,
      beforeEnter: (to, from, next) => {
        // Your are free to add whatever logic here.
        // On first visit
        next("/two");
      }
    },
    {
      path: "/two",
      component: Two
    }
  ]
});

নেভিগেশন গার্ডদের সম্পর্কে আরও পড়ুন এখানে

Comments

দুঃখিত, টনি 19 এর উত্তরের জন্য একই। আমি ব্যবহারকারীকে পুনর্নির্দেশ করতে চাই না। Twoব্রাউজারের url থাকলে আমি ভিউটি রেন্ডার করতে চাই .../two। বর্তমানে এটি হয় না

— hrp8sfH4xQ4

Answer 4

আসলটি পরীক্ষা করতে আপনি কি গিথুব রেপো বা কিছু সরবরাহ করতে পারেন?

অন্যথায় আমার প্রথম ধারণাটি হল শিশুদের রুটগুলি বেস হিসাবে "খালি" দর্শন সহ ব্যবহার করা, আমি কী চেষ্টা করেছি সে সম্পর্কে এখানে একটি উদাহরণ। (আমার ক্ষেত্রে কাজ করা)

router.js

export default new Router({
    mode: 'history',
    base: '/my-embedded-app/',
    routes: [
      {
        path: '/',
        name: 'base',
        component: Base,
        children: [
          {
            path: '',
            name: 'one',
            component: One
          },
          {
            path: 'two',
            name: 'two',
            component: Two
          }
        ]
      }
    ]
})

Base.vue

<template>
    <router-view/>
</template>

One.vue

<template>
  <div>One</div>
</template>

Two.vue

<template>
  <div>Two</div>
</template>

Comments

এই সমস্যা এই সঙ্গে সম্পর্কযুক্ত এখানে stackoverflow.com/questions/58397766/... এবং আমি পরীক্ষার উদ্দেশ্যে একটি ছোট সংগ্রহস্থলের নির্মিত github.com/byteCrunsher/router-startup

— hrp8sfH4xQ4