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事件，添加的事件不起作用。

    <router-link to="/02">
</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记录的前进和后退

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

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