vue跳转路由的几种方式以及接收参数的方法

1. router-link

//不带参数
<router-link :to="{path:'/home'}">
<router-link :to="{name:'Home'}">

//带参数
<router-link :to={name:'Home',params:{id:1}}>

2. this.$router.push(函数中跳转)

//不带参
this.$router.push({path:'/home'})
this.$router.push({name:'Home'})

//params传参
this.$router.push({name:'Home',params:{id:1}})

//query传参
this.$router.push({path:'/home',query:{id:1}})
this.$router.push({name:'Home',query:{id:1}})

//params与query的区别
params类似post，跳转页面，url后面不会拼接参数，但是刷新页面参数会消失
query类似get,跳转页面，url后面会拼接参数，类似于？id=1,非重要性的可以这样传，重要性参数不建立用query传参。

3. this.$router.replace()(用法同上，push)

4. this.$router.go(n)

this.$router.go(n)
向前或向后跳转n个页面，n可正可负

PS:区别

this.$router.push：
跳转到指定url，并想history栈中添加一个记录，点击后退会返回到上一个页面；
this.$router.replace：
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面（说白了就是直接替换了当前页面）；
this.$router.go(n)：
向前或向后跳转n个页面，n可正可负

页面获取传递过来的参数

//params传参
html 取参：$route.params.id
script 取参：this.$route.params.id


//query传参：
html 取参：$route.query.id
script 取参：this.$route.query.id