当前位置：首页 > 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中可以通过集成拼音转换库（如pinyin或pinyin-pro）实现这一功能。安装拼音转换库…

vue实现列表显示

Vue 实现列表显示的方法在 Vue 中实现列表显示通常使用 v-for 指令，结合数组或对象数据渲染动态列表。以下是几种常见的实现方式。基本列表渲染通过 v-for 指令遍历数组，动态生成列…

vue设计与实现目录

以下是《Vue设计与实现》一书的典型目录结构（根据常见技术书籍及Vue核心内容整理）：响应式系统响应式数据的基本原理依赖收集与触发更新实现简易响应式系统 Proxy与Reflec…

vue前端分页怎么实现

前端分页实现方法在Vue中实现前端分页通常涉及数据分割和页面控制逻辑。以下是常见的实现方式：使用计算属性分页通过计算属性对数据进行切片处理： computed: { paginate…

vue实现点击跳转路由

Vue 实现点击跳转路由的方法在 Vue 中实现点击跳转路由可以通过以下几种方式完成，具体取决于项目使用的路由管理工具（通常是 Vue Router）以及需求场景。使用 router-link…

vue实现密码框的包

Vue 密码框实现方案在 Vue 中实现密码框功能，可以通过原生 HTML 结合 Vue 指令或使用第三方组件库完成。以下是几种常见方案：原生 HTML + Vue 双向绑定 <temp…

vue实现子路由