Vue3——前端路由

求一键三连

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

前言

从这个角度再去看前后端分离就感觉很好理解了，很多东西就更加清晰了。

前端路由的发展历程

有一个历史关系
后端路由——前后端分离——前端路由（单页面富应用（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-link和router-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然后跳转到对应的页面

–

导航守卫官网介绍

导航解析流程（了解）

了解一下就行了，其实不大用得上，需要来查一下就好了