一、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
beforeRouteLeave
-
beforeRouteUpdate
:在当前路由改变,但是该组件被复用时调用。例如【带参数的动态路由】。
注意:keep-alive
的组件激活时,路由仍然调beforeRouteEnter
,而不是beforeRouteUpdate
,只是组件不会重新创建,即不会走beforeCreate → mounted
,而是执行activated
生命周期
七、路由守卫执行顺序
八. 路由钩子的3个入参 to from next
其中next
的入参都有哪些类型?
- 布尔值 :false 取消跳转
- 回调 :(beforeRouteEnter 是支持给 next 传递回调的唯一守卫)
vm => {}
在回调里面拿到组件实例,调用的节点是:vm beforeMount → next注册的回调 → vm mounted
- 字符串 :路由的path
- 对象:跟
vm.$router.push
的入参一样