当前位置：首页 > VUE

vue实现子路由

2026-01-18 10:10:29VUE

Vue 实现子路由的方法

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

安装 Vue Router

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

npm install vue-router

配置路由文件

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

vue实现子路由

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），内容根据需求编写：

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');

嵌套路由命名

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

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

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

标签: 路由 vue

分享给朋友：

vue实现文字播放栏

Vue 实现文字播放栏（跑马灯效果）方法一：使用 CSS 动画 + Vue 数据绑定通过 CSS 的 @keyframes 实现动画效果，结合 Vue 的动态数据绑定控制内容。 <tem…

vue实现用户信息表

Vue 实现用户信息表的方法使用 Vue CLI 创建项目安装 Vue CLI 并初始化项目： npm install -g @vue/cli vue create user-info-tabl…

vue实现选区

Vue 实现选区的基本方法在Vue中实现选区功能通常涉及DOM操作和事件处理。以下是几种常见的方法：使用原生JavaScript的Selection API 通过window.getSelec…

vue怎么实现

Vue 实现方法 Vue 是一个流行的前端框架，用于构建用户界面。以下是几种常见的实现方法：数据绑定使用 v-model 指令实现双向数据绑定，适用于表单输入元素。 <input v…

vue 实现tab

实现 Tab 切换功能在 Vue 中实现 Tab 切换功能可以通过动态组件或条件渲染完成。以下是两种常见方法：使用 v-if 或 v-show 实现条件渲染通过绑定 currentTab 变…

vue滚动实现

Vue 滚动实现方法使用原生滚动在 Vue 中可以通过 ref 获取 DOM 元素，调用原生滚动方法实现滚动效果。适用于简单场景。 <template> <div ref=…

vue实现子路由