当前位置：首页 > VUE

vue实现子路由

2026-01-18 10:10:29VUE

Vue 实现子路由的方法

在 Vue 中实现子路由主要通过 Vue Router 完成，以下是具体实现步骤：

安装 Vue Router

确保项目中已安装 Vue Router，若未安装，可以通过以下命令安装：

npm install vue-router

配置路由文件

在项目的 src/router/index.js 文件中配置路由，定义父路由和子路由：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child1',
        component: () => import('@/views/Child1.vue')
      },
      {
        path: 'child2',
        component: () => import('@/views/Child2.vue')
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

父组件中设置路由出口

在父组件 Parent.vue 中，使用 <router-view> 作为子路由的出口：

<template>
  <div>
    <h1>父组件</h1>
    <router-link to="/parent/child1">子路由1</router-link>
    <router-link to="/parent/child2">子路由2</router-link>
    <router-view></router-view>
  </div>
</template>

子路由组件

创建子路由对应的组件文件（如 Child1.vue 和 Child2.vue），内容根据需求编写：

<template>
  <div>
    <h2>子路由1</h2>
  </div>
</template>

动态子路由

若需要动态子路由，可以在子路由的 path 中使用参数：

children: [
  {
    path: 'child/:id',
    component: () => import('@/views/Child.vue')
  }
]

路由跳转

在代码中通过 router.push 跳转子路由：

this.$router.push('/parent/child1');

嵌套路由命名

可以为子路由命名，便于跳转：

vue实现子路由

children: [
  {
    path: 'child1',
    name: 'Child1',
    component: () => import('@/views/Child1.vue')
  }
]

通过以上步骤，可以在 Vue 中实现子路由功能。

标签: 路由 vue

分享给朋友：

vue实现滚动截屏

实现滚动截屏的基本思路滚动截屏通常指对超出可视区域的长页面进行完整截图。在Vue中，可以通过结合DOM操作、Canvas绘制及第三方库实现。以下是具体方法：使用html2canvas库实现安装…

vue实现分屏

Vue 实现分屏的方法分屏功能通常用于展示多个独立内容区域，以下是几种常见的实现方式：使用 CSS Grid 布局通过 CSS Grid 可以轻松创建分屏布局，在 Vue 组件中直接应用样式：…

vue实现路径

Vue 实现路径的方法在 Vue 中实现路径管理通常涉及 Vue Router 的使用，以下是一些常见的实现方法：安装 Vue Router 通过 npm 或 yarn 安装 Vue Route…

vue scrolltop 实现

实现 Vue 中的 scrollTop 在 Vue 中实现滚动到顶部功能可以通过多种方式完成，包括使用原生 JavaScript、Vue 指令或第三方库。以下是几种常见的实现方法：使用原生 Jav…

vue 实现跳转

Vue 实现页面跳转的方法在 Vue 中实现页面跳转通常可以通过以下几种方式实现，具体选择取决于项目需求和技术栈（如是否使用 Vue Router）。使用 Vue Router 进行编程式导航…

vue nexttrick实现

Vue 中 nextTick 的实现原理 nextTick 是 Vue 提供的一个异步方法，用于在下次 DOM 更新循环结束之后执行延迟回调。它利用了 JavaScript 的事件循环机制，确保回调在…

vue实现子路由