vue $router路由跳轉方式 --帶參數

方法: push()和replace()跳轉

this.$router.push()和this.$router.replace()用法一緻

1.  不帶參數
this.$router.push('/login')         //this.$router.replace('/login')
this.$router.push({name:'login'})   //this.$router.replace({name:'login'})
this.$router.push({path:'/login'})   //this.$router.replace({path:'login'})

2.  帶參數-query傳參
this.$router.push({name:'login',query: {key:'xiong'}})  //this.$router.replace({name:'login',query: {key:'xiong'}})
this.$router.push({path:'/login',query: {key:'xiong'}})
//this.$router.replace({path:'/login',query: {key:'xiong'}})

 接收:  this.$route.query.key//注意這裡是$route,不要寫成$router
 
3. params傳參
this.$router.push({name:'login',params: {key:'xiong'}})
// 路由需要配置 path: "/home/:key" 或者 path: "/home:key" ,
// 不配置path ,第一次可請求,重新整理頁面key會消失
// 配置path,重新整理頁面key會保留
接收: this.$route.params.key


query/params差別
query類似 get, 跳轉之後頁面 url後面會拼接參數,類似?key=xiong&val=22, 非重要性的可以這樣傳, 密碼之類還是用params重新整理頁面id還在
params類似 post, 跳轉之後頁面 url後面不會拼接參數 , 但是重新整理頁面id 會消失
           

this.$router.go(n)

this.$router.push()
跳轉到指定路徑，history棧中添加一個記錄，點選後退會傳回到上一個頁面
this.$router.replace()
跳轉到指定路徑，history棧中沒有記錄，點選傳回跳轉到上上個頁面