vue3 的router跳轉 - 頁面同tab跳轉和打開新tab跳轉

vue3的路由基本知識

當前頁需要的方法

• 主要是獲得Vue Router實例暴露的一些方法，使用這些方法，進行路由操作
• 引入

import { useRouter } from 'vue-router';

• 調用

const router = useRouter();

目標頁需要的方法

主要是對傳遞來的參數，進行接收，比如查詢參數，頁面路徑,標題，hash等

• 調用

import { useRoute } from 'vue-router';

route裏面的數據會被處理成響應式

頁面同tab跳轉

• push(to)：跳轉到指定的路由，可以接收一個path或包含path的對象。

當前頁

import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ path: '/order/list', query: { uids: record.id } });

目標頁

import { useRoute } from 'vue-router';
const route = useRoute();
//需要注意的地方找了需要加上currentRoute.value.才能獲取到query和params。
console.log(router.currentRoute.value.query)

打開新tab跳轉，使用resolve方法

• resolve(rawLocation, currentLocation)：用於路由解析的輔助函數。

router.resolve()方法將’/detail’解析爲完整的URL地址http://example.com/detail`

當前頁

import { useRouter } from 'vue-router';
const router = useRouter();
window.open(router.resolve('/page/editor?page_id=' + row.page_id).href, '_blank')

目標頁

import { useRoute } from 'vue-router';
const route = useRoute();
route.query.page_id || ''