vue3 vue-router的使用

前端路由是如何做到URL和内容进行映射呢？监听URL的改变

目录

前端路由原理

vue-router的使用

 默认路由，重定向

hash与history模式

router-link

路由懒加载

 动态路由

 404页面

路由嵌套

 编程式跳转

 页面的前进后退

router-link的v-slot

 router-view的v-slot

动态添加，删除路由

 路由导航守卫

URL的hash

html5的history

 history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面

replaceState：替换原来的路径；//浏览器不可回退

pushState：使用新的路径；//相当于压栈的操作，浏览器可回退

popState：路径的回退；

go：向前或向后改变路径；

forward：向前改变路径；

back：向后改变路径

npm install vue-router      //我是基于4版本的，如果你下载的不是4版本，@4指定版本

我们一般在src目录下创建router文件夹，创建index.js文件

第一步：创建路由组件的组件

第二步：创建路由映射关系数组routes

第三步：通过createRouter创建路由对象，并且传入routes和history模式

第四步：页面使用router-link,router-view组件

 重定向要写完整路径

 history更好看，没有#。但是需要后端配置

router-link事实上有很多属性可以配置

to属性：是一个字符串，或者是一个对象，表示要跳转到那个组件

replace属性：设置 replace 属性,会调用 router.replace(),而不是 router.push();浏览器不能前进后退

active-class属性：设置激活a元素后的class，默认是router-link-active

exact-active-class属性：设置激活a元素后的class，精准匹配，默认是router-link-exact-active

tag属性：设置渲染某种标签（4版本上已经弃用，不灵活，改为slots）

按前面哪种组件导入方式，最后打包会打到一起，会造成首屏渲染速度

我们可以利用webpack分包，import函数

routes中的组件对象，对应的component，可以传一个组件，也可以传一个函数，函数需要返回一个promise，而import函数就是返回一个promise

 我们也可以修改打包后的名字

我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的ID是不同的； 在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

可以是一个，也可以是多个

 获取动态路由的值

 在页面中我们通常写一个NotFound页面，当用户随意修改url时，给用户提示

 我在/:pathMatch(.*)后面又加了一个 *；

 区别是解析时，$route.params.pathMatch的值会解析为数组形式

 二级路由组件的渲染位置也由router-view实现，放到home组件中

前面我们都是通过router-link跳转的，我们也可以通过代码跳转

 compositionsAPI中

 界面中获取数据

router的go方法

 router也有back：通过调用 history.back() 回溯历史。相当于 router.go(-1)

router也有forward：通过调用 history.forward() 在历史中前进。相当于 router.go(1)；

当我们想使用动画，或者keep-alive,可以使用router-view的增强

做动画vue3给我们了内置组件transition组件，但是transition组件必须包裹组件，router-view不是

我们可以使用router-view的slot

 Component：要渲染的组件；

route：解析出的标准化路由对象；

在做后台管理系统项目时，我们经常遇到这样的需求，不同角色登录，不同权限，显示不同菜单

我们可以根据后台返的数据渲染菜单，但是用户修改url还是会进入别的页面，有安全隐患

所有我们不能把routes写死，根据不同的权限添加不同路由

就是路由跳转过程中一些钩子函数，主要用来通过跳转或取消的方式守卫导航

有全局导航守卫，路由独享，组件内

这里我们就说下最常用的router.beforeEach全局前置守卫

全局的前置守卫beforeEach是在导航触发时会被回调的

 完！！！