Vue页面跳转及传参总结

 

1.router-link

传参：<router-link :to="{path:'/home'}"> <router-link :to="{name:'home', params(query): {id:1}}">

取参：html：$router.params(query).id script:this.$route.params(query).id

2.this.$router.push()(函数里面调用) 路由跳转

传值：this.$router.push({name:'home'}) this.$router.push({name:'home',query: {id:'1'}})

3.this.$router.replace() 路由替换

4.this.$router.go(n)(向前或向后跳转n个页面)

5.this.$router.back() 后退

6.this.$router.forward() 前进

query和params的区别：

query类似get,跳转之后页面，url后面会拼接参数，非重要数据可以这样传，刷新页面id还在

params类似post，跳转之后页面url后面不会拼接参数，但是刷新页面id会消失

区别：

this.$router.push

跳转到指定的url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面（之间就是替换了当前页面）