Vue-Router
1. 前端路由发展历程
-
后端路由：当我们页面中需要请求不同的路径内容时，交给服务器来处理，服务器渲染好页面，并且将页面返回给客户端
-
前后端分离：后端只提供api来返回数据，前端通过ajax获取数据，并且通过JS将数据渲染到页面
-
单页面富应用
-
SPA: single page web application（在前后端分离的基础上加了一层路由）
-
前端路由：由前端来维护关系，在不同的url显示不同的组件 核心：改变url,但是页面不进行整体的刷新 本质：监听url的变化
-
2. 改变URL, 页面不刷新的两种模式
- hash模式
- history模式
3. Vue-Router的使用过程
-
安装:
- npm install vue-router
-
使用:
结果展示：
4. Vue-Router知识点补充
4.1. 默认路径
- path -> redirect
4.2. history模式
- createWebHistory()
4.3. router-link其他属性
- to
- replace
- active-class
- exact-active-class
4.4. 路由懒加载-分包处理
-
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载：
- 如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效，也可以提高首屏的渲染效率；
-
其实就是webpack的分包知识，而Vue Router默认就支持动态来导入组件：
- 这是因为component可以传入一个组件，也可以接收一个函数，该函数需要放回一个Promise，而import函数就是返回一个Promise；
5. 动态路由使用
path: /user/:id
结果展示
6. NotFound页面匹配
path: /:pathMatch(.*)
path: /:pathMatch(.*)*
它们的区别在于解析的时候，是否解析 /
7. 路由的嵌套使用
1.在一层路由中添加 children属性:
{ path: "recommend", component: () => import("../views/homerecomend.vue") }
2.在Home组件中添加 <router-view>
路径跳转可添加 <router-link>
8. 编程式导航
8.1. 跳转的方式
- 页面跳转push():
//点击按钮完成跳转
this.$router.push('/about')
//也可传入一个对象
this.$router.push({
path:'/about'
query:{
name:'xiaocaiji',
age:18
}
})
- 替换页面操作：replace()
使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前页面是一个替换操作，那么可以使用replace
声明式：<router-link :to='...' replace>
编程式：router.replace(...)
- 若是在setup中编写代码，如下图所示，通过useRouter来获取
8.2. 路径的切换
router.back()
router.forward()
router.go(number)
10 动态管理路由
10.1 什么情况下需要动态管理路由
- 前端都会开发哪些项目;
- 后台管理系统
10.2 动态添加路由
- router.addRoute({})
- router.addRoute("name", {})
10.3 管理路由别的方法
- 移除路由的三种方式
- 添加一个name相同的路由；
- 通过removeRoute方法，传入路由的名称
- 通过addRoute方法的返回值回调；
检查路由是否存在：router.hasRoute()
获取一个包含所有路由记录的数组router.getRoutes()
11. 路由导航守卫
11.1 beforeEach
11.2 路由导航的流程解析
12.VSCode的模板的警告解除
若template有波浪线警告，可在jsconfig.json中添加
"jsx":"preserve"
