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 || ''