目录
一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)
二、Element-Plus常用组件使用(输入框、下拉框、单选框多选框、el-image图片、轮播图、日期时间选择器、表格、分页组件、插槽、对话框)。(博客链接如下)
三、 Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)。(博客链接如下)
四、Vue3集成Vue-Router(嵌套路由、路由守卫、404NotFound页面设计与路由配置)实操学习。
<2>router.beforeEach((to,from,next)=>{xxx})。
<3>meta。(补充路由对象参数—如:设置当前路由页标题)
一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)
二、Element-Plus常用组件使用(输入框、下拉框、单选框多选框、el-image图片、轮播图、日期时间选择器、表格、分页组件、插槽、对话框)。(博客链接如下)
三、 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