Vue3——前端路由

文章介绍了前端路由的发展,从后端路由到前端路由的转变,重点讲解了vue-router的创建步骤,包括hash和history两种模式。还涉及了路由懒加载、路由的name、meta、动态路由、编程式导航、页面前进后退、路由嵌套、动态添加和删除路由,以及路由导航守卫的概念和使用。
摘要由CSDN通过智能技术生成

求一键三连

希望大家看完觉得有用的话点赞、关注和收藏,感谢!!!

前言

在这里插入图片描述
从这个角度再去看前后端分离就感觉很好理解了,很多东西就更加清晰了。

前端路由的发展历程

有一个历史关系
后端路由——前后端分离——前端路由(单页面富应用(SPA))
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
(之前的叫MPA,后来出现的单页面叫SPA)
在这里插入图片描述
在这里插入图片描述

什么是前端路由:

由前端来维护映射关系了,不同url显示不同组件
抓住本质,就是在不同的url映射不同的组件来显示
在这里插入图片描述

实现前端路由的两种方式

第一种 URL的Hash

在这里插入图片描述

第二种H5的history

在这里插入图片描述

vue-router

在这里插入图片描述

创建步骤

在这里插入图片描述

1.创建一个js文件(命名为index.js)配置路由信息,这个文件放在router文件夹里,然后导入到main.js中(注册)
	import router from './router' + createApp(App).use(router).mount('#app')
	别忘了在index.js(路由文件)导出router(路由对象)  export default router

2.在路由文件中导入要使用的路由函数,例如:
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

3.创建路由const router = createRouter( { }) 记住里面是一个路由对象,所以写法都是键值对写法,导出的router就是这个router对象

4.在 createRouter( { } )中指定采用的模式: hash/history
 history: createWebHashHistory() 或者 history: createWebHistory()

5.在 createRouter(  { })中配置路由映射关系(都是放在一个数组里面的)
	routes: [ {
	path: "/home", 
    component: () => import("../Views/Home.vue"),(这里是我们自己写好的组件)
   }]  
	routes:[ ] 因为是路由映射表,所以采用数组的形式,里面放的是对象,采用键值对,一个是路径,一个是组件
	特别注意的是,在组件这里我们直接采用函数导入组件,这样在webpack中就会分包进行打包,而不是全都打包到app.js中。
	现在都是这个方式,所以最好都采用这个方式去写。
	
6.路由配置完之后在app.vue里面使用router-link来实现路由跳转,注意to属性和replace属性
  但是注意要别忘了使用router-view进行占位,写在组件想要渲染的地方,等组件跳转过来就渲染
  区分link和view,link默认是一个a超链接,只是负责实现路由跳转,但是view是实际跳转后组件实现所放的位置。
  两者缺一不可。

记住router-linkrouter-view是不可以分开的,因为router-link的跳转需要view来选择放在哪里,如果没有view就无法展示


在这里插入图片描述

一些细节

redirect :重定向

在这里插入图片描述
有一些网站不喜欢哈希模式,不喜欢看到#,所以history模式比较常见

在这里插入图片描述

replace(替换)跳转就不会记录到历史里面,所以点击返回<-,就不会返回,会回到浏览器首页
所以不要用replace,做一个了解

router-link

在这里插入图片描述
后面两个是调试选中后的css(最后一个可以自己命名)
在这里插入图片描述

路由懒加载(分包)

在这里插入图片描述

如何做呢,和异步组件一样,使用箭头函数进行import函数就会分包(前面注释的是分包的名字)默认不分包的

在这里插入图片描述

在这里插入图片描述

路由其他属性(name meta)

在这里插入图片描述
可以在url上看到
在这里插入图片描述

动态路由(掌握)

用户id不同,页面不同,所以路径不可以写死,路径是动态的所以是动态路由
在这里插入图片描述

获取动态路由的id
在这里插入图片描述
这块也可以看到compositions api的一个特点,那就是都是用hook返回一个对象(变量)

同时,route.params存着路由的相关信息


NotFound(掌握)

未匹配的路径要配置一个未匹配的组件提示(自己创建一下) 这样对用户更友好
注意path里面必须要写成那个样子才是所有未匹配的都显示这个
在这里插入图片描述
获取参数然后做更多的解释
在这里插入图片描述

加*获得的是一个数组
在这里插入图片描述

知识点太多,这些代码都要练习练习

编程式导航

对于除了vue-router以外的其他元素也做跳转处理
在这里插入图片描述

直接push和push+path的区别是path可以传更多的参数
在这里插入图片描述

query对应的meta的作用


在这里插入图片描述

页面前进后退

就是在页面上实现前进后退

在这里有一个发现,那就是uesRouter()用的特别多,这个方法要记得,要用router拿到再使用。
在这里插入图片描述

在这里插入图片描述

路由嵌套(掌握)

主要就是对router-view的使用,一定要记住它是用来占位的

在这里插入图片描述

  1. 要在路由配置文件里面配置好嵌套路由(加了重定向)

  2. 再在home组件里写好嵌套的路由配置(router-link+router-view)

在这里插入图片描述

老师的 一个项目:在这里插入图片描述

动态添加路由(高级 addRoute)

主要是实际应用场景,比如说分为管理员和普通用户,很多页面是不能让普通用户看到的,只有是管理员才能查看的,所以这个路由就不能写死在router里面,需要在确认管理员身份之后再进行动态添加路由(才有权限访问)。

可以在vue文件里动态添加路由
在这里插入图片描述
在这里插入图片描述

删除路由(了解 removeRoute)

在这里插入图片描述

路由导航守卫(高级)

逻辑:是否进入订单页面,要进行判断,这里的处理就叫路由导航守卫(拦截)
在这里插入图片描述
guard:守卫

进行任何的路由跳转之前, 传入的beforeEach中的函数都会被回调
在这里插入图片描述

在拦截的时候那个判断语句不能少,否则就会一直递归调用这个跳转就无法显示了,也就是当跳转到登陆之后就不进行跳转拦截了。

关键是判断用户是否登陆: localStorage保存token。
判断是否有token,如果没有(那么说明没有登陆),且不在登陆页面,那么跳转到登陆页面。如果已经登陆则不拦截

登陆的逻辑: 点击登陆之后保存token然后跳转到对应的页面
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

导航守卫官网介绍

导航解析流程(了解)

了解一下就行了,其实不大用得上,需要来查一下就好了
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值