지정된 브라우저 URL로 시작시 리디렉션

기본 경로로 새로운 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;

호출 할 때 앱이 구성 요소 2 를 렌더링하도록하고 싶습니다 .../my-embedded-app/two. 안타깝게도 router.replace항상 /브라우저 URL 이로 리디렉션됩니다 .../my-embedded-app/. 나는을 디버깅하고 router경로가 있음을 보았지만 그 경로가 /기대됩니다 /two.

중요 사항 :/two URL이 때마다 사용자를 리디렉션하고 싶지 않습니다 /. TwoURL이 인 경우 보기를 렌더링하고 싶습니다 /two. 현재는 그렇지 않습니다.

무엇이 잘못 되었나요? 어쩌면 나는 그 리디렉션이 필요하지 않으며 문제를보다 우아한 방법으로 해결할 수 있습니다.

이것이 정상적인 동작이며 단일 페이지 응용 프로그램이 작동하는 방식입니다. #와 같은 "파운드"기호는 링크가 응용 프로그램을 다른 페이지로 이동하지 않음을 의미합니다.

라우터 모드를

mode:"hash"

업데이트 : jsfiddle

무슨 일이 일어나고 있는지 route.currentRoute.fullPath라우터가 준비되기 전에 실행되었습니다.

시도하십시오 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
    }
  ]
});

내비게이션 보호대에 대한 자세한 내용은 여기를 참조하십시오.

실제 테스트를 위해 github repo 또는 일부를 제공 할 수 있습니까?

그렇지 않으면 내 첫 번째 아이디어는 "빈"보기가있는 어린이 경로를 기본으로 사용하는 것입니다. 여기서 내가 시도한 것에 대한 예입니다. (필자의 경우)

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>

하나. 뷰

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

두. 뷰

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