一、3.x版本下的hash模式
默认是hash模式
|--支持PushState的话，监听的是popstate事件，调用history.pushState、history.replaceState、history.go这些history的API
|--不支持的话，监听hashchange事件，更改window.location.hash、或者调用window.location.replace
通过
popstate来监听路由变化，pushState方法不会触发页面刷新，地址栏会有反应，router-view 将显示与 url 对应的组件url后跟hash值，
http://localhost:8080/mobile/#/user/menu，利用hash(即#以及后面的内容)匹配组件并渲染。每一次改变Hash，都会在浏览器的访问历史中增加一个记录。此外Hash虽然出现在URL中，但不会被包括在HTTP请求中，即#及之后的字符不会被发送到服务端进行资源或数据的请求，只是用来指导浏览器动作的，对服务器端没有效果，因此改变Hash不会重新加载页面
二、路由跳转
底层调用history的api：
- push → history.pushState
- replace → history.replaceState
- forward → history.go(1)
- back → history.go(-1)
- go → history.go
三、路由传参
编程式导航跳转 useRouter.push({})
- 如果提供了
path，则params会被忽略 -
query会出现在地址栏（?之后），刷新不会丢失
声明式导航跳转
<router-link :to="{ name:'router1', params: { id: status ,id2: status3}, query: { queryId: status2 }}" >
router-link跳转router1
</router-link>
动态路由
{
// 通过冒号+参数名的形式
path: "/report/order/:id",
name: "order-report",
component: OrderReport,
}
- 此时
/report/order/123、/report/order/456都会匹配该路由，并且该组件收到的路由参数为params: {id: '123'}，params: {id: '456'} - 注意：当从
/report/order/123导航到/report/order/456时，该组件会被重复使用，所以setup不会重新执行，可以监控onBeforeRouteUpdate
四. 动态路由addRoute
userRoutes.forEach(r => {
router.addRoute(r);
});
addRoute会新建一条路由记录，一般用来做用户权限
五. 404路由
- 404应为路由列表的最后一项，当添加动态路由时，addRoute方法内部也会将
'*'移动至最后1位
// v3.x
{
path: '/404',
component: NotFound
},
{
path: '*',
redirect: '/404'
}
- v4.x已经删除了星标路由
// v4.x
{ path: '/:pathMatch(.*)*', component: NotFound },
【redirect到404】和【component写404】的区别：地址栏的地址是否会改变。redirect会将其他未匹配到的地址改为404
六、路由守卫
- 全局前置守卫
const router = new VueRouter({ ... }) // v4.x为createRouter
router.beforeEach((to, from, next) => {});
- 全局后置守卫
router.afterEach((to, from) => {})
- 路由独享的守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
- 组件内的守卫
-
beforeRouteEnter(无法在vue3 setup中使用)：在要进入的组件创建 / 激活之前执行
先beforeRouteEnter → 创建 beforeCreate
先beforeRouteEnter → 激活 activated
image.png beforeRouteLeave-
beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。例如【带参数的动态路由】。
注意：keep-alive的组件激活时，路由仍然调beforeRouteEnter，而不是beforeRouteUpdate，只是组件不会重新创建，即不会走beforeCreate → mounted，而是执行activated生命周期
七、路由守卫执行顺序
image.png
八. 路由钩子的3个入参 to from next
其中next的入参都有哪些类型？
- 布尔值 ：false 取消跳转
- 回调 ：（beforeRouteEnter 是支持给 next 传递回调的唯一守卫）
vm => {}在回调里面拿到组件实例，调用的节点是：vm beforeMount → next注册的回调 → vm mounted - 字符串 ：路由的path
- 对象：跟
vm.$router.push的入参一样
