Vue3实战学习（Vue3集成Vue-Router(嵌套路由、路由守卫、404NotFound页面设计与路由配置)）(下)(8)

Vue3集成Vue-Router实操学习
最新推荐文章于 2025-08-21 11:36:56 发布
最新推荐文章于 2025-08-21 11:36:56 发布
阅读量1.7k 收藏 54
点赞数 31
CC 4.0 BY-SA版权
分类专栏： Vue学习 Element-Ui学习 文章标签： vue.js javascript vue3 elementui element-plus 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74363339/article/details/146198381

目录

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

二、Element-Plus常用组件使用(输入框、下拉框、单选框多选框、el-image图片、轮播图、日期时间选择器、表格、分页组件、插槽、对话框)。(博客链接如下) 

三、 Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)。(博客链接如下)

四、Vue3集成Vue-Router(嵌套路由、路由守卫、404NotFound页面设计与路由配置)实操学习。

（1）嵌套路由。

<1>基本解释。

<2>实操。

定义父级页面路由。配置子页面路由(children)。

通过RouterView在父级页面渲染子页面。

父、子页面嵌套路由的页面整体渲染效果。

<3>父、子级的嵌套路由的总结。

App.vue。(最外层父级页面。所有Vue工程的入口)

（2）路由守卫。(导航守卫:修改网页标题)

<1>基本解释。

<2>router.beforeEach((to，from，next)=>{xxx})。

<3>meta。(补充路由对象参数—如：设置当前路由页标题)

<4>设置将到达的路由页面标题。

<5>各父、子级页面的网页标题渲染效果。

<6>router.back()。(回到上次路由)

（3）404NotFound页面设计与路由配置。

<1>基本介绍。

<2>404NotFound页面设计思路。

<3>404NotFound页面代码示例。

<4>404路由的配置。(不能在父级下面)

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

二、Element-Plus常用组件使用(输入框、下拉框、单选框多选框、el-image图片、轮播图、日期时间选择器、表格、分页组件、插槽、对话框)。(博客链接如下) 

三、 Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)。(博客链接如下)

四、Vue3集成Vue-Router(嵌套路由、路由守卫、404NotFound页面设计与路由配置)实操学习。

（1）嵌套路由。
<1>基本解释。
  • 在 Vue 3 中集成Vue-Router并实现嵌套路由，通过路由配置中定义父子关系的路由，让一个路由组件内部可以包含其他路由组件。
  • 嵌套路由：允许在一个路由组件内部嵌套其他路由组件。这种结构非常适合构建具有层级关系的页面，比如一个父页面包含多个子页面。例如，一个“用户管理”页面可以包含“用户列表”和“用户详情”两个子页面，它们通过嵌套路由来实现。
<2>实操。
  • 子页面与父页面的结构如下。

  • 定义父级页面路由。配置子页面路由(children)。
  • index.js文件中的routers(路由数组)中配置。
  • 注意：子路由的path属性的url不需要在路径前+"/"。
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path:'/',redirect:'/manager/home'},
    {path:'/manager',component: () => import('../views/Manager.vue'),children:[
        {path: 'home', name: 'home', component: () => import('../views/Home.vue')}, // url:/manager/home
        {path: 'test', name: 'test', component: () => import('../views/Test.vue')}, // url:/manager/test
        {path: 'demo', name: 'demo', component: () => import('../views/Demo.vue')}, // url:/manager/demo
      ]
    },
  ],
})

export default router
  • 通过RouterView在父级页面渲染子页面。
<template>
  <div style="margin: 5px;padding:10px 0;background-color: deepskyblue">
    <h4>这是父级页面，可以嵌套其他的子路由页面</h4>
    <div style="width: 70%; margin:15px auto;padding: 10px 0;background-color: darksalmon;">
      <!--  渲染子页面  -->
      <RouterView/>
    </div>
  </div>
</template>

<script setup>

</script>
  • 父、子页面嵌套路由的页面整体渲染效果。
  • 父级页面(Manager.vue)渲染效果。

  • 子页面(Home.vue)渲染效果。

  • 子页面(Test.vue)渲染效果。

  • 子页面(Demo.vue)渲染效果。

<3>父、子级的嵌套路由的总结。
  • 在父级页面嵌套其它子级路由页面的渲染——路由嵌套。
  • 在嵌套路由里：子路由的路径前面不需要写'/'，访问时会自动添加。

  • 在父页面通过标签<RouterView/>渲染子级路由页面的内容。

  • App.vue。(最外层父级页面。所有Vue工程的入口)

  • 页面的渲染效果如下。

（2）路由守卫。(导航守卫:修改网页标题)
<1>基本解释。
  • 路由守卫是Vue Router提供的一种机制。它就像是路由跳转过程中的 “关卡检查员”，能够在路由发生变化的不同阶段执行特定的代码逻辑，以此来控制路由的跳转行为。
  • 路由守卫可以检查用户是否已经登录、是否具备访问某个页面的权限。若不满足条件，可阻止跳转或引导到其他页面。
  • 路由守卫在路由跳转之前，提前获取页面所需的数据，保证页面能快速展示内容。记录用户的路由跳转行为，方便进行数据分析。
<2>router.beforeEach((to，from，next)=>{xxx})。
  • beforeEach()表示路由跳转前之前的操作。
  • from：进行跳转的当前route对象。(跳转前的一些搡作)
  • to：跳转后router对象。(跳转后的一些操作)
  • next()方法：必须调用该方法后，才能进入下一个钩子。

<3>meta。(补充路由对象参数—如：设置当前路由页标题)
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path:'/',redirect:'/manager/home'},
    {path:'/manager',meta:{ title:'父级页面'},component: () => import('../views/Manager.vue'),children:[
        {path: 'home', name: 'home', meta:{ title:'主页'}, component: () => import('../views/Home.vue')}, // url:/manager/home
        {path: 'test', name: 'test', meta:{ title:'测试数据页01'},  component: () => import('../views/Test.vue')}, // url:/manager/test
        {path: 'demo', name: 'demo', meta:{ title:'测试数据页02'},  component: () => import('../views/Demo.vue')}, // url:/manager/demo
      ]},
  ],
})

router.beforeEach((to,from,next)=>{
    
})


export default router
<4>设置将到达的路由页面标题。
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path:'/',redirect:'/manager/home'},
    {path:'/manager',meta:{ title:'父级页面'},component: () => import('../views/Manager.vue'),children:[
        {path: 'home', name: 'home', meta:{ title:'主页'}, component: () => import('../views/Home.vue')}, // url:/manager/home
        {path: 'test', name: 'test', meta:{ title:'测试数据页01'},  component: () => import('../views/Test.vue')}, // url:/manager/test
        {path: 'demo', name: 'demo', meta:{ title:'测试数据页02'},  component: () => import('../views/Demo.vue')}, // url:/manager/demo
      ]},
  ],
})

router.beforeEach((to,from,next)=>{
    //设置即将跳转的路由页面的网页标题
    document.title=to.meta.title
    next() //必须调用的方法
})


export default router
<5>各父、子级页面的网页标题渲染效果。
  • Manager.vue页面。

  • Home.vue页面。

  • Test.vue页面。

  • Demo.vue页面。

<6>router.back()。(回到上次路由)

  • router.back()是在前端开发中，使用路由（Router）机制实现页面后退功能的代码。
  • 使用Vue-Router进行Vue.js开发时，router.back()可以让用户在不刷新页面的情况下，返回至历史记录中的上一个路由页面。实现页面之间的高效导航。
 
  • Test.vue页面返回主页面Home.vue。
<el-button style="margin: 10px" type="primary" v-on:click="router.back()">返回主页</el-button>
import router from "@/router/index.js";

（3）404NotFound页面设计与路由配置。
<1>基本介绍。
  • 404NotFound，是HTTP对网页错误情况返回的一种状态码。
  • 当用户在浏览器中输入网址时，服务器会根据输入的地址判断是否有对应的网页信息。如果没有对应信息，说明用户输入的可能是一串无效的链接，服务器就会向用户返回404NotFound状态码，告诉用户没有找到对应的网页信息。
<2>404NotFound页面设计思路。
  • 为了提高用户的体验。就设置一个可观的404NotFound页面信息提示+回退操作。
  • 因为学习：博主直接选择模仿网页端的B站(https://www.bilibili.com/)的404页面设计。

<3>404NotFound页面代码示例。
  • 在静态资源目录(assets)下保存图片。

  • 404.vue。代码示例。
<template>
  <div style="text-align: center">
    <el-image :src="NotFoundImage" ></el-image>
    <div style="margin: 10px auto"><el-button type="primary" @click="goHome" style="width: 150px;height: 40px">返回主页</el-button></div>
  </div>
</template>

<script setup>
import NotFoundImage from '@/assets/very_sorry.png'

const goHome = () =>{
  //返回到主页
  location.href = '/manager/home'
}
</script>

  • 页面渲染效果。

<4>404路由的配置。(不能在父级下面)
  • 实现效果。路由出现问题时：统一路由到达404NotFound页面。
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path:'/',redirect:'/manager/home'},
    {path:'/manager',meta:{ title:'父级页面'},component: () => import('../views/Manager.vue'),children:[
        {path: 'home', name: 'home', meta:{ title:'主页'}, component: () => import('../views/Home.vue')}, // url:/manager/home
        {path: 'test', name: 'test', meta:{ title:'测试数据页01'},  component: () => import('../views/Test.vue')}, // url:/manager/test
        {path: 'demo', name: 'demo', meta:{ title:'测试数据页02'},  component: () => import('../views/Demo.vue')}, // url:/manager/demo
      ]},
      {path: '/404', name: 'NotFound', meta:{ title:'404找不到页面'}, component: () => import('../views/404.vue')},
      {path:'/:pathMatch(.*)',redirect:'/404'}
  ],
})

router.beforeEach((to,from,next)=>{
    //设置即将跳转的路由页面的网页标题
    document.title=to.meta.title
    next() //必须调用的方法
})


export default router

从零开始搭建vue3项目（三）项目集成vue-router
qq_44996937的博客
03-12 1251
配置vue-router
vue3基础入门项目实战实例介绍
代上老码的专栏
04-07 658
这个实战项目是一个简单的待办事项管理应用，用户可以添加、编辑和删除待办事项。通过这个项目，你将学习到如何使用 Vue 3 的组件、响应式系统、生命周期钩子以及基本的路由管理。
Vue 3 基础教程：从入门到精通
askein的博客
08-21 813
Vue 3 是一个渐进式 JavaScript 框架，用于构建用户界面。🚀 性能更好（比 Vue 2 快 2 倍）📦 包体积更小🎯 更好的 TypeScript 支持📱 更好的移动端支持fill:#333;color:#333;color:#333;fill:none;important;important;important;important;important;important;important;important;important;important;important;
Vue3实战教程：从概念到部署的完整项目搭建
A_Liyulong的博客
07-10 7804
太久没有进行从0到1进行项目搭建，日常的组件维护及组价的开发让我快忘记如何从头搭建一个完整的项目，正好借这个机会好好回忆下以往的知识。测试创建./store/user.ts，引入组件，打印效果例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
vue3集成vue-router
I_xuebi的博客
05-20 517
vue vue3 集成 vue-router 路由
vue3 vue-router集成使用
qq_41241504的博客
07-15 456
vue3 vue-router集成使用
vue3+vue-router4如何配置404页面路由
徐同保的专栏
08-13 493
vue3+vue-router4如何配置404页面路由
vue.js vue-router如何实现无效路由(404)的友好提示
11-27
本篇文章将探讨如何使用Vue Router来优雅地处理无效路由，即实现一个友好的404页面。 首先，我们需要理解Vue Router的工作原理。Vue Router基于path路径来匹配预先注册的路由对象。当用户导航到一个新的URL，Vue ...
12vue3实战-----路由导航守卫
太阳与星辰的博客
02-09 332
本章主要讲述了vue3实战中的路由导航守卫功能
vue-router嵌套路由|父子路由
caoxinjian423的博客
10-06 1929
router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' Vue.use(VueRou
vue-router 路由跳转、带参动态路由匹配、404路由和嵌套路由
g841805的博客
03-19 1481
核心代码全部代码常量路由home.vueabout.vueabout1.vue效果homeaboutabout1404。
Vue3项目实战
qq_44930306的博客
08-24 1777
这章分享一下vue3语法在项目中的具体应用。
vue 3 项目实战
2401_83781937的博客
07-03 3376
本文记录了项目实现的详细步骤以及原理，十分适合初学vue的萌新练手，也是阶段性学习的一个总结，可能会有些啰嗦，勿怪~。先从登录界面开始，常规的登录界面不太好看，起不到复习巩固的作用，于是找到了下面这个。
项目实战-Vue3项目
m0_57860459的博客
03-07 2074
安装脚手架 npm install -g create-vite-app 创建项目 create-vite-app projectName 安装依赖 用vscode打开项目, 运行npm i 运行项目 npm run dev // 可以在package.json里修改 预览项目 用浏览器打开:http://localhost:3000 项目实践2: 配置路由# 文档地址:Vue Router 插件: vetur 前言...
Vue3商城项目实战
shieryue_2016的博客
12-13 8462
本文介绍Vue3实现商品管理后台，内容包括项目构建、登录、账号管理、角色管理和商品管理等
Vue3基础之项目实战
m0_73035591的博客
03-06 1471
如果我们需要使用scss中配置的属性，使用自动导入之后，就不需要在进行手动import导入。3.在项目中使用的时候，需要在一个<i>标签中引入，并且添加 iconfont 这个属性。1.首先将需要使用的图标加入到iconfont的购物车中，然后将其导入到项目中。在父组件App.vue与Layout下的index.vue中配置路由出口。在vite.config.js中配置按需引入。3.在vite.config.js中配置。在vite.config.js中配置。在router.js中配置路由路径。
vue3.0 集成vue-router、vuex
weixin_43932067的博客
11-30 1896
搭建vue3.0脚手架插件分布情况（最新版） 输入npm info xxxx(插件名称) versions可查看当前插件所有版本 “vue”: “^3.0.0”; “vue-cli”:"^4.5.9"; “vue-router”: “^4.0.0-rc.5”; “axios”: “^0.21.0”; “vuex”: “^4.0.0-rc.2”; 第一步、安装对应的插件 cnpm i xxx(插件名称)@xxx(版本号) --save 第二步、插件集成到vue-cli脚手架中 1. 初始化vue-
Vue3项目实战开发
weixin_42533732的博客
09-04 4545
vue3基础理论、vue3的项目从0开始搭建、vue3的项目实战
vue3 vue-router 找不到路由返回404页面
最新发布
08-26
在 Vue3 中使用 `vue-router` 时，可以通过配置 `routes` 数组中的最后一个路由来实现当找不到路由路径时导航到 404 页面。这一功能的核心在于使用 `path: &#39;/:pathMatch(.*)*&#39;` 的通配符语法，用于匹配所有未被其他路由规则捕获的路径。 在定义路由时，可以添加一个特殊的路由对象，其 `path` 属性设置为 `&#39;/404&#39;`，并将其组件指向一个专门用于展示 404 页面的组件。同时，为了确保所有未被匹配的路径都能被捕获，需要在 `routes` 数组的末尾添加一个使用通配符的路由对象，其 `redirect` 属性指向 `/404`。这样，当用户尝试访问一个不存在的路由路径时，就会被重定向到 404 页面[^1]。 下面是一个具体的配置示例： ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39; import Home from &#39;../views/Home.vue&#39; import NotFound from &#39;../views/NotFound.vue&#39; const routes = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: Home }, { path: &#39;/about&#39;, name: &#39;About&#39;, // 延迟加载 About 组件 component: () => import(&#39;../views/About.vue&#39;) }, { path: &#39;/404&#39;, name: &#39;NotFound&#39;, component: NotFound }, { path: &#39;/:pathMatch(.*)*&#39;, redirect: &#39;/404&#39; } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router ``` 在这个例子中，`NotFound` 组件被指定为 `/404` 路径的组件，而 `path: &#39;/:pathMatch(.*)*&#39;` 的路由定义确保了所有未被其他路由规则匹配的路径都会被重定向到 `/404` 路径，从而显示 404 页面[^1]。 此外，`vue-router` 还提供了 `beforeEach` 方法，可以用来实现更复杂的逻辑，比如在导航到 404 页面之前执行某些检查或操作。但是，对于大多数应用来说，上述的基本配置已经足够满足需求。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岁岁岁平安

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值