Vue 路由四种跳转方式 比较

路由跳转的四种方式

1  router-link 			 // 声明式
2  this.$router.push()   //编程式                                  
3  this.$router.replace()//用法同push
4  this.$router.go(number)//

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

params query区别

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

http://localhost:8080/#/ind/basic //传参 路由不可见
http://localhost:8080/#/ind/home?kkk=5555//传参数路由可见

params只能用name来引入路由，

query 要用 path 来引入   接受参数 this.$route.query.name
params要用 name 来引入	接受参数 this.$route.params.name

path 相比 name没有 ‘/‘ name 不可以跳回 ‘/’
path 适用于父子之间的跳转
name 适用于 兄弟之间的跳转

router-link

<router-link :to="{name:'home', params: {id:1}}"> 
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id
 
<router-link :to="{path:'home', query: {id:1}}"> 
 
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id

this.$router

this.$router.push({name:'home',params: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
 
// html 取参  $route.query.id
// script 取参  this.$route.query.id
 
params传参
 
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
 
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
 
// html 取参  $route.params.id
// script 取参  this.$route.params.id

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.query.name和this.route.params.name。