दिए गए ब्राउज़र URL द्वारा स्टार्टअप पर पुनर्निर्देशित करें

Question

मैंने आधार पथ के साथ एक नया Vue ऐप बनाया। इस तथ्य के कारण ऐप को दूसरे Vue ऐप में एम्बेड किया गया है, यह ऐप router-viewस्टार्टअप पर रेंडर नहीं करता है । यदि आप इस बारे में अधिक जानना चाहते हैं कि यह ऐप किसी अन्य ऐप में कैसे या क्यों एम्बेड किया गया है, तो कृपया यहां देखें:

Vue ऐप्स को मुख्य Vue ऐप के कंटेनर में माउंट करें

और इस समस्या का मेरा अपना जवाब:

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

जब मेरा आवेदन शुरू होता है, तो यह सिवाय सब कुछ प्रदान करता है router-view। मैं दिए गए ब्राउज़र URL द्वारा स्टार्टअप पर पुनर्निर्देशित करना चाहता हूं। यह मेरा राउटर कॉन्फिग है:

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 जब भी url हो, मैं उपयोगकर्ता को पुनर्निर्देशित नहीं करना चाहता /। मैं सिर्फ उस दृश्य को प्रस्तुत करना चाहता हूं Twoजब यूआरएल है /two। वर्तमान में यह नहीं है।

क्या गलत हो सकता है? शायद मुझे उस पुनर्निर्देशन की भी आवश्यकता नहीं है, और समस्या को अधिक सुरुचिपूर्ण तरीके से हल कर सकते हैं।

Comments

क्या आपका मतलब है, आप एक घटक को रेंडर करना चाहते हैं जब आप लिखते हैं - / / my-एम्बेडेड-ऐप / एक URL के रूप में और घटक दो के लिए - / / my-एम्बेडेड-ऐप / दो? यदि हाँ, तो क्या आपने कोशिश की है - {पथ: 'दो', घटक: दो, '' / 'को' / 'से

— हटाकर

हाँ बिल्कुल। मैंने आपके दृष्टिकोण की कोशिश की लेकिन फिर मुझे एक चेतावनी मिली कि इस मार्ग को एक प्रमुख स्लैश का उपयोग करना है। अनुप्रयोग चलाते समय यह मार्ग तब काम नहीं करता था ..

— hrp8sfH4xQ4

क्या आप अपने मार्ग का क्रम बदल सकते हैं?

— VariableVasasMT

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); });

— VariableVasasMT

खेद है कि काम नहीं किया। जब मैं onReady ईवेंट का उपयोग करता हूं तो मुझे भी यह त्रुटि message: "Navigating to current location ("/subApps/app-one") is not allowed"

— मिलती है

@ hrp8sfH4xQ4 मैं सुझाव देता हूं कि आप एक jsfiddle बनाएं और बताएं कि आपको क्या जरूरत है और हो सकता है कि लोग आपके लिए इसे बदल सकें, हम वास्तव में समस्या को पुन: उत्पन्न कर सकते हैं।

— VariableVasasMT

खेद है कि मैं इसे एक बेला के साथ पुन: पेश नहीं कर सकता। IFrame कंटेनर के लिए एक फाइलर की आवश्यकता होती है। लेकिन इसके लिए परीक्षण प्रयोजनों के भंडार है 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

क्षमा करें, tony19 के उत्तर के लिए भी यही है। मैं उपयोगकर्ता को पुनर्निर्देशित नहीं करना चाहता। 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

— hrp8sf4xQ4