vueRouter-编程式的导航
vueRouter-编程式的导航
tianyawhl 发表于1个月前
vueRouter-编程式的导航
  • 发表于 1个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

除了使用<router-link>创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。
router.push(location)
想要导航到不同的url,则使用router.push方法。这个方法会像history栈添加一个新的记录,
所以,当用户点击浏览器后退按钮时,则回到之前的url
当你点击<router-link>时,这个方法会在内部调用,所以说,点击<router-link :to="...">等同于调用
router.push(...)
该方法的参数可以是一个字符串路径,或者一个描述地址的对象,例如:
//字符串
router.push("home")
//对象
router.push({path:"home"})
命名的路由
router.push({name:"user",params:{userId:123}})
//带查询参数,变成/register?plan=private
router.push({path:'register',query:{plan:'private'}})


router.replace(location)
跟router.push很像,唯一不同就是,它不会像history添加新记录,而是跟它的方法名一样-替换掉当前的history记录
声明<router-link :to="..." replace>    编程式 router.replace(...)

router.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)

共有 人打赏支持
粉丝 2
博文 150
码字总数 56427
×
tianyawhl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: