1、router-link跳转
1.不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}">
2.带params参数
<router-link :to="{name:'home', params: {id:123456}}">
3.带query参数
<router-link :to="{name:'home', query: {id:123456}}">
2、this.$router.push()
1. 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query传参
this.$router.push({name:'home',query: {id:'123456'}})
this.$router.push({path:'/home',query: {id:'123456'}})
3. params传参
this.$router.push({name:'home',params: {id:'123456'}})
跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回到上一个页面。
query和params区别
query类似get, 跳转之后页面url后面会拼接参数,类似?id=123456, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似post, 跳转之后页面url后面不会拼接参数, 但是刷新页面id会消失。
3、this.$router.replace()
用法同上,和第2个的this.$router.push方法一样。
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上个页面 (直接替换当前页面)。
4、this.$router.go(n)
<button @click="upPage">上页</button>
<button @click="downPage">下页</button>
// 上页
upPage() {
this.$router.go(-1); // 后退一步记录,等同于 history.back()
},
// 下页
downPage() {
this.$router.go(1); // 在浏览器记录中前进一步,等同于 history.forward()
}
向前或者向后跳转n个页面,n可为正整数或负整数。