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

发布于:2025-03-16 ⋅ 阅读:(16) ⋅ 点赞:(0)

目录

一、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