Vue路由器错误地将我带到父路由答案

【问题标题】：Vue router taking me to parent route mistakenlyVue路由器错误地将我带到父路由
【发布时间】：2022-01-07 00:24:28
【问题描述】：

我的 Vue 路由器通常工作得很好，但是当我在某些路由上并想要导航到其中一个父路由时，它会将我带回根重定向路由而不是我希望它去的子路由

例如，有问题的路线是account-creation。当我从大多数路线使用$router.push('/account-creation') 导航到那里时，它工作得很好。但是，如果我从任何帐户详细信息子路由（如 overview）导航到那里，它会将我带到 /account 而不是 /account-creation！

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('MainLayout.vue'),
    children: [
      { path: '/', redirect: '/account' },
      { path: 'account', component: () => import('AccountList.vue') },
      { path: 'account-creation', component: () => import('AccountCreation.vue') },
      { 
        path: 'account/:accountId', 
        component: () => import('AccountDetailsLayout.vue'),
        children: [
          { path: 'overview', component: () => import('AccountOverview.vue') },
          { path: 'settings', component: () => import('AccountSettings.vue') },
        ],
      }
    ]
  }
];

我已经尝试了所有可以在网上找到的解决方案，包括使用完全限定路径、重新排序路由、使用名称路由，但都无济于事

我很确定它与根 / 路径中的 /account 重定向有关，但不知道如何维护该功能并修复该行为

如何确保从 account/{id}/overview 导航到 account-creation 正确导航到 account-creation，而不是 /account 的重定向路由

我尝试过的事情

使用命名路径
使用路径：要路由到的对象
重新排序路线
/account/:accountId/overview 等路由中的完整路径

【问题讨论】：

您是否尝试过使用$router.push({ path: 'account-creation' });，我怀疑它正在尝试寻找与“帐户”子级相同级别的路径（概述、设置），但因为它不存在，它重定向到重定向到“帐户”路由的根路由。另一种方法是使用命名路由：router.vuejs.org/guide/essentials/named-routes.html
感谢@Diego，但这根本不会改变行为：-\ 使用$router.push({ path: 'account-creation' }); 或/'account-creation' 与我原来的问题没有任何不同
你的第一个子路径很奇怪，它现在指的是路径//而不是/；应该使用空字符串路径作为“默认子”。我还喜欢在末尾添加一条包罗万象的路线 ({path: '*', component: 404.vue}) 用于无法匹配的路线以避免奇怪的行为或崩溃。您可以在 vue devtools（或 beforeEach 中的 console.log）中检查您的路由历史记录，以更好地了解您的路由是如何被解释的，并请分享，所以我们不是“猜测它与 X 有关”： )
你真的需要嵌套路由吗？如 Excalibaard 所述，您设置的路线不正确

标签： vue.js vue-router

【解决方案1】：

您的根路径似乎存在冲突（前面带有“/”的每条路径）。您可以查看嵌套路由的 vue-router 文档 Vue Nested Routes


const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: () => import('AccountList.vue'),
        alias: '/account'
    },
    {
        path: '/account-creation',
        component: () => import('AccountCreation.vue')
    },
    {
        path: '/account/:accountId',
        component: () => import('AccountDetailsLayout.vue'),
        children: [
            {
                path: 'overview',
                component: () => import('AccountOverview.vue')
            },
            {
                path: 'settings',
                component: () => import('AccountSettings.vue')
            }

    }
]

这样的事情可能会起作用，但正如您指出的那样，“/”上的重定向是一种代码味道，因为您加载了不同的组件。
MainLayout 组件永远不会使用此代码挂载，而是将您重定向到 AccountList。

编辑

我根据 Excalibaard 的评论编辑了原始答案。您可能应该在 MainLayout.vue 中添加 <router-view>

附： /account 路径应该是 accounts 因为它呈现一个列表

【讨论】：

这可以通过将 mainLayout 放在 <router-view> 组件周围来解决，这可能是帐户最初位于子路由中的原因。在旧情况下，在路径 /account 处，第一个（应用程序级别）<router-view> 将呈现 MainLayout.vue，其中包含另一个呈现 AccountList 的 <router-view>。您的解决方案尚不支持此功能。

【解决方案2】：

如果您正确地将 id 传递给路由，那么问题将是您的 AccountDetailsLayout.vue 中必须有一个子 router-view 标签才能使用 url account/{id}/overview 显示此路由。由于这是主布局的孙子。只需像这样将路由器视图标签放在文件中即可。

AccountDetailsLayout.vue
-----------------------

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

<script>

export default {
    name: "AccountDetailsLayout",
    components: {},
    store,
    data() {
        return {};
    },
    computed: {},
    mounted() {},
    methods: {}
};
</script>

<style scoped></style>

【讨论】：

OP 声明“如果我从任何帐户详细信息子路由（如overview）导航到那里”，因此暗示overview 路由是可见的，这意味着AccountDetailsLayout 已经包含<router-view>。