Chuyển hướng khi khởi động bằng URL trình duyệt đã cho

Tôi đã tạo một ứng dụng Vue mới với đường dẫn cơ sở. Do thực tế ứng dụng được nhúng vào một ứng dụng Vue khác, ứng dụng này không hiển thị khi router-viewkhởi động. Nếu bạn muốn biết thêm về cách thức hoặc lý do ứng dụng này được nhúng vào ứng dụng khác, vui lòng xem tại đây:

gắn ứng dụng Vue vào thùng chứa ứng dụng Vue chính

và câu trả lời của riêng tôi cho vấn đề này:

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

Khi bắt đầu ứng dụng của tôi, nó kết xuất mọi thứ trừ router-view. Tôi muốn chuyển hướng khi khởi động bằng URL trình duyệt đã cho. Đây là cấu hình bộ định tuyến của tôi :

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;

Tôi muốn ứng dụng hiển thị thành phần Hai khi gọi .../my-embedded-app/two. Thật không may, router.replaceluôn luôn chuyển hướng đến /(vì vậy URL của trình duyệt là .../my-embedded-app/). Tôi đã gỡ lỗi routervà thấy rằng đó là con đường /, nhưng tôi sẽ mong đợi nó /two.

Lưu ý quan trọng: Tôi không muốn chuyển hướng người dùng /twobất cứ khi nào có url /. Tôi chỉ muốn hiển thị chế độ xem Twokhi url /two. Hiện tại nó không.

Điều gì có thể sai? Có lẽ tôi thậm chí không cần chuyển hướng đó, và có thể giải quyết vấn đề một cách thanh lịch hơn.

Đó là hành vi bình thường, đó là cách ứng dụng một trang hoạt động. Dấu "pound" - như # - có nghĩa là các liên kết sẽ không di chuyển ứng dụng sang trang khác.

để bạn có thể thay đổi chế độ bộ định tuyến thành

mode:"hash"

đã cập nhật: jsfiddle

Những gì vết thương xảy ra là route.currentRoute.fullPathđã được thực hiện trước khi bộ định tuyến đã sẵn sàng.

Hãy thử beforeEnter. Hãy xem đoạn mã dưới đây:

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

Tìm hiểu thêm về bảo vệ điều hướng ở đây

Bạn có thể cung cấp một repo github hoặc một số để kiểm tra thực tế?

Mặt khác, ý tưởng đầu tiên của tôi là sử dụng các tuyến đường dành cho trẻ em với chế độ xem "trống" làm cơ sở, đây là một ví dụ về những gì tôi đã thử. (làm việc trong trường hợp của tôi)

bộ định tuyến

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

Cơ sở.vue

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

Một.vue

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

Hai.vue

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