เปลี่ยนเส้นทางเมื่อเริ่มต้นด้วย URL เบราว์เซอร์ที่กำหนด


9

ฉันสร้างแอป 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เมื่อ URL เป็น/twoคือ ในปัจจุบันมันไม่ได้

มีอะไรผิดปกติ? บางทีฉันอาจไม่ต้องการการเปลี่ยนเส้นทางนั้นและสามารถแก้ปัญหาได้อย่างสวยงามยิ่งขึ้น


คุณหมายถึงคุณต้องการแสดงองค์ประกอบหนึ่งเมื่อคุณเขียน - / my-embedded-app / one เป็น URL และส่วนประกอบสองสำหรับ - / my-embedded-app / two ถ้าใช่คุณลองแล้ว - {path: 'two', component: Two,} กำลังลบ '/' จาก '/ two'
urvashi

ใช่แล้ว ฉันลองวิธีการของคุณแล้ว แต่ฉันได้รับคำเตือนว่าเส้นทางนี้ต้องใช้เครื่องหมายทับ เมื่อเรียกใช้แอปพลิเคชันเส้นทางนี้ใช้งานไม่ได้ ..
hrp8sfH4xQ4

คุณสามารถเปลี่ยนลำดับเส้นทางของคุณได้ไหม
VariableVasasMT

คำตอบ:


1

นั่นเป็นพฤติกรรมปกติมันเป็นวิธีการทำงานของแอปพลิเคชันหน้าเดียว เครื่องหมาย "pound" - like # - หมายความว่าลิงก์จะไม่ย้ายแอปพลิเคชันไปยังหน้าอื่น

เพื่อให้คุณสามารถเปลี่ยนโหมดเราเตอร์เป็น

mode:"hash"

0

อัปเดต: jsfiddle

สิ่งที่เกิดขึ้นroute.currentRoute.fullPathก่อนที่เราเตอร์จะพร้อม


นั่นไม่ได้เปลี่ยนแปลงอะไรเลย router.currentRoute.fullPathยังคงกลับมา/แทน/twoเมื่อโทรlocalhost: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

@ hrp8sfH4xQ4 ฉันขอแนะนำให้คุณสร้าง jsfiddle และอธิบายสิ่งที่คุณต้องการและอาจเป็นคนที่สามารถเปลี่ยนแปลงได้สำหรับคุณเราไม่สามารถทำซ้ำปัญหาได้
VariableVasasMT

ขอโทษฉันไม่สามารถทำซ้ำนี้ด้วยซอ จำเป็นต้องใช้เซิร์ฟเวอร์ไฟล์สำหรับคอนเทนเนอร์ IFrame แต่นี่เป็นที่เก็บข้อมูลสำหรับวัตถุประสงค์ในการทดสอบgithub.com/byteCrunsher/router-startup
hrp8sfH4xQ4

0

ลอง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
    }
  ]
});

อ่านเพิ่มเติมเกี่ยวกับการ์ดนำทางที่นี่


ขอโทษสำหรับคำตอบของ tony19 ฉันไม่ต้องการเปลี่ยนเส้นทางผู้ใช้ ฉันต้องการที่จะทำให้Twoมุมมองหาก URL .../twoเบราว์เซอร์ ขณะนี้ยังไม่เปิดให้บริการ
hrp8sfH4xQ4

0

คุณช่วยจัดหา repo github หรือบางส่วนเพื่อทดสอบจริง

มิฉะนั้นความคิดแรกของฉันคือการใช้เส้นทางเด็กที่มีมุมมอง "ว่างเปล่า" เป็นฐานต่อไปนี้เป็นตัวอย่างเกี่ยวกับสิ่งที่ฉันพยายาม (ทำงานในกรณีของฉัน)

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>

ปัญหานี้เกี่ยวข้องกับที่นี่stackoverflow.com/questions/58397766/…และฉันสร้างที่เก็บข้อมูลขนาดเล็กเพื่อการทดสอบgithub.com/byteCrunsher/router-startup
hrp8sfH4xQ4
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.