https://www.bilibili.com/video/BV1Zy4y1K7SH?p=119&spm_id_from=pageDriver（117 - ）

image.png

image.png

image.png

image.png

image.png

路由基本总结

image.png

组件的分类
一般组件： 放在component文件夹中，直接引入。
路由组件：放在pages文件夹中，在路由中配置。
切换走的路由组件，都是被销毁了的！

嵌套路由

image.png

image.png

路由传参

query方式传递参数

image.png

image.png

路由命名

image.png

image.png

image.png

image.png

image.png

image.png

总结

路由对浏览器历史记录的影响

一般浏览器的历史记录就是一个栈，一般使用push，不破坏历史记录，不断累加。回退用的是指针！
还有一个是replace模式，开启replace模式的方法

image.png

image.png

编程式路由导航

image.png

缓存路由组件

image.png

image.png

image.png

image.png

路由守卫（权限）

meta 路由元信息，是程序员可以自定义数据的信息字段

image.png

image.png

路由守卫总结

独享路由守卫

路由守卫对比

组件内路由守卫

前端路由守卫是为了拦截
后端路由守卫是为了修改网页title名称
独享路由守卫，是为了对单个路由进行进入前拦截

路由器的2种工作模式

表示hash （默认是hash模式） 兼容性好

history模式，去#的显示方式 兼容性略差

打包好的前端文件，必须放到服务器上部署。
前端静态资源： html、css、js

使用express 编写最简单的服务器

image.png

前端使用history模式，发布项目，直接点击什么的都是没有问题的，但是一直接刷新浏览器就报错的解决方法：
直接访问，默认是请求index.html，然后点击页面内容不发请求，只是修改页面的路由地址，一刷新页面就做了后台的请求，后台没有改接口，就报错了！
一、如果想要强制使用history模式，必须后端配合，nodejs使用中间件：（connect-history-api-fallback）

image.png

二、java也有中间件可以解决
三、也可以使用nginx配置，去判断请求的链接到底是服务器的还是前端的！

hash模式就没有该问题，因为链接地址中包含 #字符串，链接显示不好看，但是兼容性好！

image.png