vue 跳转页面的几种常用的方法

1> router-link跳转

1>不带参数
    <router-link :to="{name:'home'}">
    <router-link :to="{path:'/home'}">
/**
* name&&path都行，建议使用name
* router-link 中链接如果是 '/' 开始就是根路由开始，如果不带 '/' 则从当前路径开始
*/

2>带params参数
    <router-link :to="{name:'home',params:{id:123}">
/**
* params传参数（类似post）
* 路由配置 path:'/home/:id' 或 path:'/home:id'
* 不配置path,第一次可请求,刷新页面id会消失,配置path，刷新页面id会保留
* html 取参 $route.params.id script 取参 this.$route.params.id
*/

3>带query参数
<router-link :to="{name:'home',query:{id:123}">
/**
* query传参数，(类似get,url会显示参数)
* 路由不可配置
* html 取参 $route.query.id script取餐 this.$route.query.id
*/

2>this.$route.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'}})
// html 取参 $route.query.id    script 取参 this.$route.query.id
 
3. params传参
this.$router.push({name:'home',params: {id:'123456'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id    script 取参 this.$route.params.id
 
4. query和params区别
query类似get, 跳转之后页面url后面会拼接参数,类似?id=123456, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似post, 跳转之后页面url后面不会拼接参数, 但是刷新页面id会消失。