vue3 的router跳转 - 页面同tab跳转和打开新tab跳转

vue3的路由基本知识

当前页需要的方法

  • 主要是获得Vue Router实例暴露的一些方法,使用这些方法,进行路由操作
  • 引入
import { useRouter } from 'vue-router';
  • 调用
const router = useRouter();

image.png

目标页需要的方法

主要是对传递来的参数,进行接收,比如查询参数,页面路径,标题,hash等

import { useRoute } from 'vue-router';
  • 调用
const route = useRouter();

route里面的数据会被处理成响应式

image.png

页面同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();
route.query.order_status || []

打开新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 || ''
Logo

前往低代码交流专区

更多推荐