router.push( ... )
=>跳转到某个子页面,并在history中添加一条记录
router.repalce( ... )
=>替换当前的页面,其实也可以理解为跳转,和push的区别就是不会在history中添加记录
router.go(number)
=>刚才提到的history,在go()中被使用,跳转到上一页就go(-1),跳转到下一页就go(1),当然实现跳转的前提都是history中有记录。
声明式 | 编程式 |
---|---|
< router-link :to="…"> | router.push(…) |
// 方式一:字符串路径
router.push('/user')
// 方式二:path对象
router.push({ path: '/user' })
// 方式三:路由名称
router.push({ name: 'user'})
注 意 : 如 果 提 供 了 p a t h , p a r a m s 会 被 忽 略 , q u e r y 不 会 ! ! \color{green}{注意:如果提供了 path,params 会被忽略,query不会!!} 注意:如果提供了path,params会被忽略,query不会!!
// 不生效
router.push({ path: '/user', params: { id: 1 }})
// params生效 /user/1
router.push({ name: 'user', params: { id: 1 }}) // 使用name方式
router.push({ path: `/user/1` }) // 直接在path上扩充
// query不受影响 /user?id=1
router.push({ path: '/user', query: { id: 1 }})
声明式 | 编程式 |
---|---|
< router-link :to="…" replace> | router.replace(…) |
跟
r
o
u
t
e
r
.
p
u
s
h
很
像
,
唯
一
的
不
同
就
是
,
它
不
会
向
h
i
s
t
o
r
y
添
加
新
记
录
!
\color{green}{跟router.push 很像,唯一的不同就是,它不会向 history 添加新记录!}
跟router.push很像,唯一的不同就是,它不会向history添加新记录!
在 history 记录中向前或者后退多少步,类似 window.history.go(n)
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败,不报错
router.go(-100)
router.go(100)