【Vue2】编程式路由导航

在Vue Router中,除了使用 创建 a 标签来定义导航链接之外,还可以使用Vue Router通过编写代码来实现导航.
他提供的三个实例方法:router.push、router.replace和router.go,使用起来相较于声明式导航更加灵活
这些方法都在VueRouter的原型对象上.这些方式都可以通过this.$router来访问到

router.push
  • <rotuer-link to=" "></router-link>内部默认调用的是该方法。
  • 该方法可以传入三个参数:
    • location跳转路由信息 参数与<rotuer-link to=" "></router-link>中的to一致
    • resolve成功回调
    • reject失败回调
    this.$router.push(location,($router)=>{...},(err)=>{...})
    // 对象携带参数的方式调用
    this.$router.push({
    	//path:"/search"  path与params不可以同时使用
    	name:'search',
    	params:{...}query:{...}
    },
    $router=>{},
    err=>{...}
    )
    
    它会向 history 栈添加一个新的记录,当进行后退操作时会回到之前访问的路径。

    例如我们访问了:8080:/home/ -> :8080/home/search/ -> :8080/home/search?kw=abc -> :8080/abc/
    他就会把先访问的放在最下面,后访问的放在最上面,后退的时候就会后入先出,从上而下取出
router.replace

该方法与router.push唯一不同的地方就是通过该方法访问的路由会替换掉最新一个历史记录。

router.go

使用该方法可以操作浏览器在历史记录中的前进与后退,

  • 当提供了一个大于0的正整数时,浏览器的路径会在history栈中向上移动对应的步数,
  • 当提供了一个小于0的负整数时,浏览器的路径会在history栈中向下移动对应的步数
  • 当提供了一个为0的参数时,浏览器会刷新页面
    下面是router.go的使用实例
    this.$router.go(1)  // 前进一个页面
    this.$router.go(0)  // 刷新页面
    this.$router.go(-1) // 后退一个页面
    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值