大白话在Vue2和Vue3实际项目开发中，如何使用vue - router实现嵌套路由，并且处理好嵌套路由的过渡动画？

前端大白话2025-04-16 10:01

大白话在Vue2和Vue3实际项目开发中，如何使用vue - router实现嵌套路由，并且处理好嵌套路由的过渡动画？

一、引言

在前端开发的江湖里，Vue.js 那可是响当当的大侠。而 vue - router 就像是大侠手中的一把利刃，帮助我们在构建单页应用（SPA）时，轻松实现页面之间的导航跳转。今天咱就来好好唠唠，在 Vue2 和 Vue3 的实际项目开发中，如何用 vue - router 耍出嵌套路由这一招，并且还给嵌套路由配上超酷炫的过渡动画。

二、Vue - router 基础回顾

（一）什么是 vue - router

vue - router 是 Vue.js 官方的路由管理器。简单来说，它能让我们像在传统网页中通过不同 URL 访问不同页面一样，在单页应用里，通过切换 URL 来展示不同的组件内容。比如说，我们有一个电商网站，首页、商品详情页、购物车页面等，就可以通过 vue - router 来管理这些页面之间的跳转。

（二）基本使用

在 Vue 项目中使用 vue - router，首先得安装它。

bash 复制代码 
# 如果是 Vue2 项目
npm install vue - router@3
# 如果是 Vue3 项目
npm install vue - router@4

安装好后，在 Vue2 项目里，我们一般在 router 文件夹下的 index.js 文件中配置路由。

javascript 复制代码 
// 引入 Vue 和 vue - router
import Vue from 'vue';
import Router from 'vue - router';
// 使用 vue - router 插件
Vue.use(Router);
// 定义路由组件
const Home = () => import('@/views/Home.vue');
const About = () => import('@/views/About.vue');
export default new Router({
  routes: [
    {
      // 定义首页路由
      path: '/',
      name: 'home',
      component: Home
    },
    {
      // 定义关于页面路由
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

在 Vue3 项目中，配置方式稍有不同。在 router 文件夹下的 index.js 中：

javascript 复制代码 
import { createRouter, createWebHistory } from 'vue - router';
// 定义路由组件
const Home = () => import('@/views/Home.vue');
const About = () => import('@/views/About.vue');
const router = createRouter({
  // 使用 HTML5 history 模式
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});
export default router;

这样配置好后，我们在页面中就可以通过 <router - link> 标签来实现页面跳转，或者在 JavaScript 代码中通过 this.$router.push('/path')（Vue2） 或 router.push('/path')（Vue3）来进行路由导航。

（三）实际项目中的注意事项

  1. 路由懒加载 ：在实际项目中，随着项目规模的增大，路由组件会越来越多。如果一次性加载所有组件，会导致首屏加载时间过长。因此，我们可以使用路由懒加载，将组件的加载延迟到需要时再进行。上面的代码中已经使用了动态导入的方式实现了路由懒加载，如 const Home = () => import('@/views/Home.vue');。
  2. 路由守卫：路由守卫可以用来控制路由的访问权限、进行数据预加载等。在 Vue2 中，有全局前置守卫、路由独享守卫和组件内守卫；在 Vue3 中，使用方式类似，但有些语法细节不同。例如，在 Vue2 中设置全局前置守卫：
javascript 复制代码 
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.meta.requiresAuth &&!isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

在 Vue3 中：

javascript 复制代码 
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth &&!isLoggedIn()) {
    return '/login';
  }
});

三、Vue2 中使用 vue - router 实现嵌套路由

（一）什么是嵌套路由

想象一下，我们有一个后台管理系统，侧边栏有个 "用户管理" 菜单，点击它展开后，还有 "用户列表"、"添加用户" 等子菜单。这些子菜单对应的页面就是 "用户管理" 页面的嵌套路由页面。在 Vue 中，通过嵌套路由可以轻松实现这种父子级页面结构。

（二）配置嵌套路由

假设我们有一个父组件 Parent，它有两个子组件 Child1 和 Child2。首先创建这几个组件文件。 Parent.vue

javascript 复制代码 
<template>
  <div>
    <h1>这是父组件</h1>
    <!-- 这里是子路由出口，子组件会渲染在这里 -->
    <router - view></router - view>
  </div>
</template>
<script>
export default {
  name: 'Parent'
};
</script>

Child1.vue

javascript 复制代码 
<template>
  <div>
    <h2>这是子组件 1</h2>
  </div>
</template>
<script>
export default {
  name: 'Child1'
};
</script>

Child2.vue

javascript 复制代码 
<template>
  <div>
    <h2>这是子组件 2</h2>
  </div>
</template>
<script>
export default {
  name: 'Child2'
};
</script>

然后在 router/index.js 中配置嵌套路由。

javascript 复制代码 
import Vue from 'vue';
import Router from 'vue - router';
// 引入父组件和子组件
import Parent from '@/views/Parent.vue';
import Child1 from '@/views/Child1.vue';
import Child2 from '@/views/Child2.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'parent',
      component: Parent,
      // 配置子路由
      children: [
        {
          // 子路由 1 的路径，注意这里没有斜杠开头，它是相对于父路由的
          path: 'child1',
          name: 'child1',
          component: Child1
        },
        {
          path: 'child2',
          name: 'child2',
          component: Child2
        }
      ]
    }
  ]
});

这样，当我们访问 /parent/child1 时，Parent 组件会被渲染，同时 Child1 组件会被渲染在 Parent 组件的 <router - view> 中。

（三）嵌套路由导航

在页面中，我们可以通过 <router - link> 来导航到嵌套路由页面。

javascript 复制代码 
<router - link :to="{name: 'parent'}">父组件页面</router - link>
<router - link :to="{name: 'child1', relative: 'parent'}">子组件 1 页面</router - link>
<router - link :to="{name: 'child2', relative: 'parent'}">子组件 2 页面</router - link>

这里 relative: 'parent' 表示相对于父路由进行导航，在 Vue2 的 vue - router 中，这样可以更方便地处理嵌套路由的导航。

（四）实际项目中的拓展案例

假设我们有一个博客管理系统，有文章管理和分类管理两个大模块，文章管理下面又有文章列表和文章详情页。

首先创建组件： ArticleManagement.vue

javascript 复制代码 
<template>
  <div>
    <h1>文章管理</h1>
    <router - view></router - view>
  </div>
</template>
<script>
export default {
  name: 'ArticleManagement'
};
</script>

ArticleList.vue

javascript 复制代码 
<template>
  <div>
    <h2>文章列表</h2>
    <!-- 这里可以展示文章列表 -->
  </div>
</template>
<script>
export default {
  name: 'ArticleList'
};
</script>

ArticleDetail.vue

javascript 复制代码 
<template>
  <div>
    <h2>文章详情</h2>
    <!-- 这里可以展示文章详情 -->
  </div>
</template>
<script>
export default {
  name: 'ArticleDetail'
};
</script>

CategoryManagement.vue

javascript 复制代码 
<template>
  <div>
    <h1>分类管理</h1>
  </div>
</template>
<script>
export default {
  name: 'CategoryManagement'
};
</script>

然后在 router/index.js 中配置路由：

javascript 复制代码 
import Vue from 'vue';
import Router from 'vue - router';
import ArticleManagement from '@/views/ArticleManagement.vue';
import ArticleList from '@/views/ArticleList.vue';
import ArticleDetail from '@/views/ArticleDetail.vue';
import CategoryManagement from '@/views/CategoryManagement.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: () => import('@/views/Admin.vue'),
      children: [
        {
          path: 'article',
          name: 'articleManagement',
          component: ArticleManagement,
          children: [
            {
              path: 'list',
              name: 'articleList',
              component: ArticleList
            },
            {
              path: 'detail/:id',
              name: 'articleDetail',
              component: ArticleDetail
            }
          ]
        },
        {
          path: 'category',
          name: 'categoryManagement',
          component: CategoryManagement
        }
      ]
    }
  ]
});

（五）注意事项

  1. 子路由路径：子路由的路径不要以斜杠开头，否则会变成绝对路径。
  2. 路由命名：合理命名路由，方便在代码中进行导航和管理。
  3. 路由嵌套深度：避免过度嵌套，否则会导致路由配置和维护变得复杂。

四、Vue2 中嵌套路由的过渡动画

（一）Vue 过渡动画基础

Vue 提供了 <transition> 和 <transition - group> 组件来实现过渡动画。对于单个元素/组件的过渡，可以使用 <transition> 组件。比如说，我们想让一个元素在进入和离开页面时淡入淡出。

javascript 复制代码 
<template>
  <div>
    <button @click="show =!show">切换显示</button>
    <transition name="fade">
      <p v - if="show">这是要过渡的元素</p>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>
<style scoped>
.fade - enter - active,
.fade - leave - active {
  transition: opacity 0.5s;
}
.fade - enter,
.fade - leave - to {
  opacity: 0;
}
</style>

在上面的代码中，fade 是过渡的名称，通过 CSS 类名 fade - enter、fade - enter - active、fade - leave - to、fade - leave - active 来控制元素进入和离开时的动画效果。

（二）为嵌套路由添加过渡动画

要为嵌套路由添加过渡动画，我们在父组件的 <router - view> 外面包裹一个 <transition> 组件。在 Parent.vue 中修改如下：

javascript 复制代码 
<template>
  <div>
    <h1>这是父组件</h1>
    <transition name="nested - fade">
      <router - view></router - view>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'Parent'
};
</script>
<style scoped>
.nested - fade - enter - active,
.nested - fade - leave - active {
  transition: opacity 0.5s;
}
.nested - fade - enter,
.nested - fade - leave - to {
  opacity: 0;
}
</style>

这样，当子路由组件在 <router - view> 中切换时，就会有淡入淡出的过渡动画效果。如果我们想让不同的子路由组件有不同的过渡动画，可以在子路由组件中再次使用 <transition> 组件，并且根据需要设置不同的过渡名称和 CSS 动画规则。

（三）实际项目中的拓展案例

在博客管理系统中，我们可以为文章管理模块的子路由添加不同的过渡动画。 ArticleManagement.vue

javascript 复制代码 
<template>
  <div>
    <h1>文章管理</h1>
    <transition name="article - fade" mode="out - in">
      <router - view></router - view>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'ArticleManagement'
};
</script>
<style scoped>
.article - fade - enter - active,
.article - fade - leave - active {
  transition: all 0.5s;
}
.article - fade - enter {
  transform: translateX(100%);
  opacity: 0;
}
.article - fade - leave - to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>

这样，当在文章列表和文章详情页之间切换时，会有左右滑动的过渡动画效果。

（四）注意事项

  1. 过渡模式 ：合理选择过渡模式，如 in - out 或 out - in，根据实际需求决定新旧元素的过渡顺序。
  2. CSS 动画性能 ：避免使用过于复杂的 CSS 动画，以免影响性能。可以使用硬件加速属性，如 transform: translate3d(0, 0, 0); 来提高动画性能。

五、Vue3 中使用 vue - router 实现嵌套路由

（一）Vue3 中路由配置变化

在 Vue3 中，vue - router 的配置和 Vue2 有一些区别。前面我们已经看过基本路由配置的不同，对于嵌套路由，思路是一样的，但语法稍有变化。 假设我们还是有 Parent、Child1、Child2 这几个组件。 router/index.js 配置如下：

javascript 复制代码 
import { createRouter, createWebHistory } from 'vue - router';
import Parent from '@/views/Parent.vue';
import Child1 from '@/views/Child1.vue';
import Child2 from '@/views/Child2.vue';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/parent',
      name: 'parent',
      component: Parent,
      children: [
        {
          path: 'child1',
          name: 'child1',
          component: Child1
        },
        {
          path: 'child2',
          name: 'child2',
          component: Child2
        }
      ]
    }
  ]
});
export default router;

组件文件和 Vue2 中的基本一样，Parent.vue 还是提供 <router - view> 来渲染子组件。

（二）导航方式变化

在 Vue3 中，导航方式也有一些不同。在组件内进行编程式导航时，Vue2 中使用 this.$router.push，而在 Vue3 中，我们需要先引入 useRouter 函数。

javascript 复制代码 
import { useRouter } from 'vue - router';
export default {
  setup() {
    const router = useRouter();
    const goToChild1 = () => {
      router.push({ name: 'child1', relative: 'parent' });
    };
    return {
      goToChild1
    };
  }
};

在模板中，<router - link> 的使用基本不变，但是在 Vue3 中，它的一些属性绑定方式遵循 Vue3 的响应式原理。

（三）实际项目中的拓展案例

还是以博客管理系统为例，在 Vue3 中配置路由：

javascript 复制代码 
import { createRouter, createWebHistory } from 'vue - router';
import ArticleManagement from '@/views/ArticleManagement.vue';
import ArticleList from '@/views/ArticleList.vue';
import ArticleDetail from '@/views/ArticleDetail.vue';
import CategoryManagement from '@/views/CategoryManagement.vue';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: () => import('@/views/Admin.vue'),
      children: [
        {
          path: 'article',
          name: 'articleManagement',
          component: ArticleManagement,
          children: [
            {
              path: 'list',
              name: 'articleList',
              component: ArticleList
            },
            {
              path: 'detail/:id',
              name: 'articleDetail',
              component: ArticleDetail
            }
          ]
        },
        {
          path: 'category',
          name: 'categoryManagement',
          component: CategoryManagement
        }
      ]
    }
  ]
});
export default router;

（四）注意事项

  1. 组合式 API 的使用 ：在 Vue3 中，更多地使用组合式 API 来处理路由相关逻辑，如 useRouter 和 useRoute。
  2. 响应式原理：在 Vue3 中，数据的响应式原理和 Vue2 不同，需要注意在路由导航和数据传递时的响应式处理。

六、Vue3 中嵌套路由的过渡动画

（一）Vue3 过渡动画新特性

Vue3 中的过渡动画在原理上和 Vue2 相似，但在一些细节上有所改进。Vue3 中的 <transition> 组件支持更多的过渡模式和事件。比如说，我们可以通过 mode 属性来控制过渡的模式，有 in - out（新元素先进入，旧元素再离开）和 out - in（旧元素先离开，新元素再进入）两种模式。

javascript 复制代码 
<transition name="fade" mode="out - in">
  <p v - if="show">这是要过渡的元素</p>
</transition>

（二）应用到嵌套路由

为 Vue3 中的嵌套路由添加过渡动画，和 Vue2 类似，在父组件的 <router - view> 外面包裹 <transition> 组件。在 Parent.vue 中：

javascript 复制代码 
<template>
  <div>
    <h1>这是父组件</h1>
    <transition name="nested - fade" mode="out - in">
      <router - view></router - view>
    </transition>
  </div>
</template>
<script setup>
</script>
<style scoped>
.nested - fade - enter - active,
.nested - fade - leave - active {
  transition: opacity 0.5s;
}
.nested - fade - enter,
.nested - fade - leave - to {
  opacity: 0;
}
</style>

这样，当子路由组件切换时，就会按照我们设置的过渡动画效果进行切换，mode="out - in" 模式会让旧的子组件先离开，新的子组件再进入，给用户带来更流畅的体验。

（三）实际项目中的拓展案例

在博客管理系统的 Vue3 版本中，我们可以为文章管理模块的子路由添加更复杂的过渡动画。 ArticleManagement.vue

javascript 复制代码 
<template>
  <div>
    <h1>文章管理</h1>
    <transition name="article - slide" mode="out - in">
      <router - view></router - view>
    </transition>
  </div>
</template>
<script setup>
</script>
<style scoped>
.article - slide - enter - active,
.article - slide - leave - active {
  transition: all 0.5s;
}
.article - slide - enter {
  transform: scale(0.8);
  opacity: 0;
}
.article - slide - leave - to {
  transform: scale(1.2);
  opacity: 0;
}
</style>

这样，当在文章列表和文章详情页之间切换时，会有缩放的过渡动画效果。

（四）注意事项

  1. 事件监听 ：Vue3 中的 <transition> 组件支持更多的事件监听，如 @before - enter、@enter 等，可以利用这些事件实现更复杂的动画逻辑。
  2. 动态过渡：可以根据路由的变化动态设置过渡的名称和模式，实现更灵活的过渡效果。

七、总结

通过上面的介绍，我们详细了解了在 Vue2 和 Vue3 项目开发中，如何使用 vue - router 实现嵌套路由，以及如何为嵌套路由添加过渡动画。无论是 Vue2 还是 Vue3，嵌套路由都为我们构建复杂的单页应用提供了强大的支持，而过渡动画则能极大地提升用户体验。在实际项目中，根据需求合理运用这些技巧，能让我们的前端应用更加出色。希望这篇文章能帮助各位程序员小伙伴们在 Vue 的开发道路上更上一层楼，少踩坑，多写优雅高效的代码。

如果你在实际应用中遇到了问题，或者有更好的实现方式，欢迎在评论区留言交流哦！

相关推荐
0509159 分钟前
测试基础笔记第四天（html）
前端·笔记·html
聪明的墨菲特i39 分钟前
React与Vue：哪个框架更适合入门？
开发语言·前端·javascript·vue.js·react.js
时光少年40 分钟前
Android 副屏录制方案
android·前端
拉不动的猪1 小时前
v2升级v3需要兼顾的几个方面
前端·javascript·面试
时光少年1 小时前
Android 局域网NIO案例实践
android·前端
_一条咸鱼_1 小时前
AI 大模型的 Prompt Engineering 原理
人工智能·深度学习·面试
半兽先生1 小时前
VueDOMPurifyHTML 防止 XSS（跨站脚本攻击） 风险
前端·xss
冴羽1 小时前
SvelteKit 最新中文文档教程（20）—— 最佳实践之性能
前端·javascript·svelte
懒懒小徐1 小时前
消息中间件面试题
java·开发语言·面试·消息队列
Jackson__1 小时前
面试官：谈一下在 ts 中你对 any 和 unknow 的理解
前端·typescript
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03DeepSeek各版本说明与优缺点分析04Scipy||第三章 线性代数 (scipy.linalg)05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07ZNS SSD垃圾回收优化方案解读-108汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10C#/.NET/.NET Core技术前沿周刊 | 第 34 期（2025年4.7-4.13）