vue路由跳轉四種方式以及區別

vue路由跳轉四種方式以及區別

1. router-link

1.不帶參數

// 注意：router-link中鏈接如果是'/'開始就是從根路由開始，如果開始不帶'/'，則從當前路由開始。
<router-link :to="{name:'home'}">  
<router-link:to="{path:'/home'}"> //name,path都行, 建議用name 

2.帶參數

// params傳參數(類似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"
// 配置path,刷新頁面id會保留 -- 不配置path,第一次可請求,刷新頁面id會消失
// html 取參:$route.params.id  -- script取參: this.$route.params.id
<router-link :to="{name:'home', params: {id:1}}" target = _blank>

// query傳參數 (類似get,url後面會顯示參數)  路由可不配置 
// html取參:$route.query.id  -- script取參:this.$route.query.id
<router-link :to="{name:'home', query: {id:1}}" target = _blank>    // 打開新頁面

3.傳遞對象 （object不能過長，不然會報錯：Failed to load resource: the server responded with a status of 400 (Bad Request)）
query傳遞對象 (類似get,url後面會顯示參數) JSON.stringify(obj) 轉一下
接收的時候使用：
JS:JSON.parse(decodeURIComponent(this.$route.query.item)) HTML:JSON.parse(decodeURIComponent($route.query.item))

<router-link :to="{name:'detail', query: {item:JSON.stringify(firItem)}}" target="_blank" >{{ firItem.name.replace(/、/g," / ") }}</router-link> 

2. this.$router.push()

1.不帶參數

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

2.query傳參

// html取參: $route.query.id -- script取參: this.$route.query.id
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

3.params傳參

// params傳參數(類似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"
// 配置path,刷新頁面id會保留 -- 不配置path,第一次可請求,刷新頁面id會消失
// html取參:$route.params.id  -- script取參:this.$route.params.id
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

4.傳遞對象 （object不能過長，不然會報錯：Failed to load resource: the server responded with a status of 400 (Bad Request)）
query傳遞對象 (類似get,url後面會顯示參數) JSON.stringify(obj) 轉一下
接收的時候使用：
JS:JSON.parse(decodeURIComponent(this.$route.query.obj)) HTML:JSON.parse(decodeURIComponent($route.query.obj))

// 打開新頁面
const { href } = this.$router.resolve({
    name: "news",
    query: { 
       row: JSON.stringify(obj)
    }
});
window.open(href, "_blank");

5.query和params區別
query類似 get，跳轉之後頁面 url後面會拼接參數，類似?id=1。非重要性的可以這樣傳，密碼之類還是用params，刷新頁面id還在。params類似 post，跳轉之後頁面 url後面不會拼接參數，但是刷新頁面id會消失。

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

4. this.$router.go(n) ()

    向前或者向後跳轉n個頁面，n可爲正整數或負整數
   

5. ps : 區別
   (1). this.$router.push

    	跳轉到指定url路徑，並想history棧中添加一個記錄，點擊後退會返回到上一個頁面
   

   (2). this.$router.replace

    	跳轉到指定url路徑，但是history棧中不會有記錄，點擊返回會跳轉到上上個頁面 (就是直接替換了當前頁面)
   

   (3). this.$router.go(n)

    	向前或者向後跳轉n個頁面，n可爲正整數或負整數