一、作用
不借助<router-link>实现路由跳转
二、路由 (push replace)
借助 $router 的push(保存浏览记录) 和replace(替换浏览记录) 与 query和params对象传参类似
1、push
触发
<button @click="pushShow(m)">push</button>
方法
name 是 path的别名, params 传递参数的一种方式
methods: {pushShow(m){this.$router.push({name:'detail',params:{// key valueid: m.id,title: m.title }})},
}
2、replace
触发
<button @click="replaceShow(m)">replace</button>
方法
methods: {replaceShow(m){this.$router.replace({name:'detail',params:{id:m.id,title:m.title}})}
}
三、导航 (back forward go)
1、back
与浏览器自带的回退一样
$router.back()
2、forward
与浏览器自带的前进一样
$router.forward()
3、go
$router.go(n)
n为正数,则前进n步,n为负数,则后退n步
触发
<button @click="backButton">back</button> <button @click="forwardButton">forward</button> <button @click="goButton">go</button>
方法
methods: {backButton(){// 后退this.$router.back()},forwardButton(){// 前进this.$router.forward()},goButton(){// 正数 前进 n,负数 后退 nthis.$router.go(2)}
},