vue跳转方式
一.router-link
1.不带参数
<router-link :to="{name:'name'}"></router-link>
<router-link :to="{path:'/name'}"></router-link>
2.带参数
<router-link :to="{name:'name', params:{id:1}}"></router-link>
<router-link :to="{path:'/name', query:{id:1}}"></router-link>
HTML取参:$route.params.id SCRIPT中取参:this.$route.params.id
二.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:
'1'
}})
this
.$router.push({path:
'/home'
,query: {id:
'1'
}})
3. params传参
this
.$router.push({name:
'home'
,params: {id:
'1'
}})
// 只能用 name
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params,刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
三.this.$router.replace()
四.this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
ps : 区别
this.$router.push
跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数