vue.js - Vue Router router.push 方法在嵌套路由中如何正确指向子路由?

Question

关于vue-router的嵌套路由和编程式导航的问题

在向子路由的导航中，我发现router.push方法会将本级路由修改而不是导向子路由
router.push('mainPageView')
在当前路由为'/MainPage'的情况下，会将路由信息更改为'/mainPageView'，而不是期望的'/MainPage/mianPageView'，导致

我试着使用完全地址

router.push(`${route.fullPath}/mainPageView`)

发现能够正常使用。但在多级的嵌套路由中，拼凑完全地址十分麻烦，并且在网上查的资料也都是不加/的子路由push应当是拼接在本级路由后的，希望得到不使用完全地址便能够正常路由的方法。

Answer 1

看你描述需求，我想应该是需要建立一个路由表。

理想状态

1、main.js文件需要有路由引入

import router from "./router";new Vue({      router,      store,      render: (h) => h(App),}).$mount("#app");

2、 main.js同层级应该有一个router文件夹，里面在新建一个index.js

import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);const routes = [ {    path: "/",    name: "Home",     children: [        {          path: "/xxx",          name: "xxx",          component: () => import("@/views/xxx/index.vue"),          meta: {            title: "页面名字xxx",          },        },         {          path: "/mainPageView",          name: "mainPageView",          component: () => import("@/MainPage/mainPageView.vue"),          meta: {            title: "页面名字mainPageView",          },        },]const router = new VueRouter({  routes,});export default router;

效果

最后就是你的业务页面直接想带参数跳转就这样整

this.router.push({    path:'/mainPageView'    param:'你的字符串参数'})

疑惑

其实我也没搞懂，如果你是自己手搓的系统或移动端，肯定需要一套路由表。如果是用成熟框架，this.router.push没毛病。你再找找，肯定有路由表的。不然太坑爹。

Answer 2

尝试使用 router.push({ name: 'mainPageView'}) 这样的方式？使用路由name去跳转？

编程式导航 | Vue Router

Answer 3

在 Vue Router 中，如果你想要通过编程式导航（如 router.push）正确地导航到嵌套的子路由，你需要确保你的路由配置是正确的，并且你提供了正确的路径。

首先，你的路由配置应该像这样，使用嵌套的路由对象：

const routes = [  {    path: '/MainPage',    name: 'MainPage',    component: MainPage,    children: [      {        path: 'mainPageView',        component: MainPageView      },      // 其他子路由...    ]  },  // 其他路由...];

在这个配置中，如果你想要导航到 MainPage 下的 mainPageView 子路由，你应该使用包含父路由名称和子路由路径的字符串，或者使用路由的位置对象。

以下是几种方法来实现这一点：

1. 使用命名的路由（如果给子路由也定义了名称）：

this.$router.push({ name: 'MainPage.mainPageView' });

注意，这里的 MainPage.mainPageView 假设你在子路由中也定义了一个名称属性，且格式为 <父路由名称>.<子路由名称>。

2. 使用路径字符串（确保包含父路由的路径）：

this.$router.push('/MainPage/mainPageView');

3. 使用路由参数对象（包含 path 属性）：

this.$router.push({ path: '/MainPage/mainPageView' });

4. 使用当前路由的 params 或 query（如果你需要基于当前路由动态地构建路径）：

this.$router.push({ path: `${this.$route.path}/mainPageView` });// 注意：这种方法可能不适用于所有情况，特别是当父路由有参数或查询字符串时

但请注意，上述第4种方法中直接拼接 this.$route.path 可能会产生问题，特别是当父路由包含动态部分（如 /user/:id）或查询字符串时。

如果你发现 router.push('mainPageView') 试图替换整个路径而不是添加到当前路径，那么很可能是因为你的路由配置中没有正确设置嵌套路由，或者你没有提供正确的路径/名称。

总之，确保你的路由配置正确，并且你使用了正确的路径或名称来导航到嵌套的子路由。如果你不想使用完整的路径字符串，那么使用命名的路由通常是一个更好的选择。