通过给定的浏览器 URL 在启动时重定向

Question

我创建了一个带有基本路径的新 Vue 应用程序。由于该应用程序嵌入到另一个 Vue 应用程序中，因此该应用程序不会在启动时呈现 router-view。如果您想了解更多关于如何或为何将此应用嵌入到另一个应用中，请查看此处：

mount Vue apps into container of main Vue app

以及我自己对这个问题的回答：

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 时呈现组件Two。不幸的是，router.replace 总是重定向到/（所以浏览器 URL 是.../my-embedded-app/）。我调试了router，发现路径是/，但我希望它是/two。

重要提示： 每当 url 为 / 时，我都不想将用户重定向到 /two。我只想在 url 为/two 时呈现视图Two。目前没有。

可能出了什么问题？也许我什至不需要那个重定向，并且可以用更优雅的方式解决问题。

Answer 1

更新：jsfiddle

最后发生的是route.currentRoute.fullPath 在路由器准备好之前执行。

Answer 2

这是正常行为，这是单页应用程序的工作方式。 “磅” - 像 # - 符号表示链接不会将应用程序移动到另一个页面。

所以你可以将路由器模式更改为

mode:"hash"

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

阅读更多关于导航守卫here

Answer 4

你能提供一个 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>

One.vue

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

Two.vue

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