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

目录

一、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的详细教程。(博客链接如下)

• Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)_创建vue工程 安装淘宝镜像-CSDN博客
• Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客
• Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)_vue3 {... }-CSDN博客
• Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图标组件。自定义主题的实现)(超详细)）(4)_vue3安装依赖-CSDN博客

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

• Vue3实战学习（Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)）(上)(5)-CSDN博客
• Vue3实战学习（Element-Plus常用组件的使用(轮播图、日期时间选择器、表格、分页组件、对话框)(超详细)）(下)(6)-CSDN博客

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

• Vue3实战学习（Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)）(上)(7)-CSDN博客
• 接下来进行Vue3集成Vue-Router(嵌套路由、路由守卫、404NotFound页面设计与路由配置)的学习。

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

• 注意本案例提前准备的三个页面(Home.vue、Test.vue、Demo.vue)的代码查看博客：Vue3实战学习（Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)）(上)(7)-CSDN博客

（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

---