router.push(),router.repalce(),router.go()使用

雍嘉勋
2023-12-01

router对象提供了三个用于跳转链接的方法:

router.push( ... ) =>跳转到某个子页面,并在history中添加一条记录
router.repalce( ... ) =>替换当前的页面,其实也可以理解为跳转,和push的区别就是不会在history中添加记录
router.go(number) =>刚才提到的history,在go()中被使用,跳转到上一页就go(-1),跳转到下一页就go(1),当然实现跳转的前提都是history中有记录。


router. p u s h \color{red}{push} push(location, onComplete?, onAbort?)
声明式编程式
< 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不会!!} pathparamsquery

// 不生效
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. r e p l a c e \color{red}{replace} replace(location, onComplete?, onAbort?)
声明式编程式
< 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.pushhistory

router. g o \color{red}{go} go(n)

在 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)
 类似资料: