vue-router 跳转及参数获取

长时间没写vue,容易忘记东西,这次记下自己的总结,方便下次看

首先,自己的路由配置:这里还少了/:userId的跳转方式

vue-router 跳转及参数获取

一、路由跳转

路由跳转有两个方式,第一种是声明式<router-link>,编程式router.push...

1.声明式

参考:https://router.vuejs.org/zh/api/#to

vue-router 跳转及参数获取

命名路由结果是/register/123, 这里还需要在路由器设置,上图我的路由并没有这个设置,

2.编程式

参考:https://router.vuejs.org/zh/guide/essentials/navigation.html

vue-router 跳转及参数获取

通常用push,其余还有replace(),参数貌似也是和push一致,但是和push不同的是不会记录在history上,go(number)历史向前或者向后跳转。

这里我的router并没有被实体化,可能是main.js或者哪里的问题。

有两种解决方案,在main.js加上window.router = router,相对邪门的方法。官方使用this.$router来使用

二、获取路由参数

路由参数基本都在route对象当中。(区分好router和route,一个是操作的事件对象,一个是只读的数据对象

vue-router 跳转及参数获取

vue-router 跳转及参数获取