vue-router总结

router-link

    router-link标签用于页面的跳转。

    <router-link to="/01">to01</router-link>

    点击这个router-link标签router-view就会渲染路径为/page01的页面。

    注意:router-link默认是一个a标签的形式,如果需要显示不同的样子,可以在router-link标签中写入不同标签元素,如下显示为button按钮,但不能在router-link标签上添加@click事件,添加的事件不起作用

  1.     <router-link to="/02">
  2.     <button>to02</button>
  3. </router-link>

router.push

script

this.$router.push({ path: '/05' })
push方法其实和<router-link :to="...">是等同的。

注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

router.replace

push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,不会向 history 栈添加一个新的记录。用法如下
template

<router-link to="/03" replace>03</router-link>

script

this.$router.replace({ path: '/03' })

router.go

go方法用于控制history记录的前进和后退

  1. // 在浏览器记录中前进一步,等同于 history.forward()
  2. this.$router.go(1)
  3. // 后退一步记录,等同于 history.back()
  4. this.$router.go(-1)
  5. // 前进 3 步记录router.go(3)
  6. // 如果 history 记录不够用,那就默默地失败呗
  7. this.$router.go(-100)
  8. this.$router.go(100)

其实很好理解:go方法就是浏览器上的前进后退按钮,后面的参数就是前进和后退的次数




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值