vue路由跳轉（新開頁面 當前頁面）

vue-router傳遞參數分為兩大類：

• 編程式的導航 router.push
• 聲明式的導航 <router-link>

1、命名路由傳遞參數需要使用params來傳遞，這里一定要注意使用params不是query。目標頁面接收傳遞參數時使用params

     特別注意：命名路由這種方式傳遞的參數，如果在目標頁面刷新是會出錯的。

    使用方法如下：

this.$router.push({ name: 'news', params: { userId: 123 }})

2、查詢參數其實就是在路由地址后面帶上參數和傳統的url參數一致的，傳遞參數使用query而且必須配合path來傳遞參數而不能用name，目標頁面接收傳遞的參數使用query。
     注意：和name配對的是params，和path配對的是query

使用方法如下：

this.$router.push({ path: '/news', query: { userId: 123 }});

聲明式的導航

聲明式的導航和編程式的一樣

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

總結：

1.命名路由搭配params，刷新頁面參數會丟失
2.查詢參數搭配query，刷新頁面數據不會丟失
3.接受參數使用this.$router后面就是搭配路由的名稱就能獲取到參數的值

 

 

一、當前頁面打開：

 this.$router.push({
            path: '/applicationManage/voice',
            query: {
              taskId: data.taskId,
            }
})

 

二、新開頁面：

 let newUrl = this.$router.resolve({
          path: "/historyRecord"
        });
window.open(newUrl.href, "_blank");