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

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

기본 경로로 새 Vue 앱을 만들었습니다.앱이 다른 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.

중요사항:사용자를 다음 주소로 리디렉션하지 않음/twoURL이 있을 때마다/뷰만 렌더링하고 싶습니다.TwoURL이/two현재는 그렇지 않다.

뭐가 잘못됐나요?리다이렉트도 필요 없고, 보다 우아한 방법으로 문제를 해결할 수 있을지도 모릅니다.

갱신: jsfiddle

결국 일어난 일은 이다.route.currentRoute.fullPath라우터가 준비되기 전에 실행되었습니다.

이것이 일반적인 동작이며, 한 페이지 어플리케이션의 동작 방식입니다.#와 같은 "pound" 기호는 링크가 응용 프로그램을 다른 페이지로 이동하지 않음을 의미합니다.

라우터 모드를 로 변경할 수 있습니다.

mode:"hash"

해라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.displaces

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>

1.vue

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

2.vue

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

언급URL : https://stackoverflow.com/questions/58288739/redirect-on-startup-by-the-given-browser-url