vue3 的router跳转 - 页面同tab跳转和打开新tab跳转
vue3的路由基本知识
当前页需要的方法
- 主要是获得Vue Router实例暴露的一些方法，使用这些方法，进行路由操作
- 引入
import { useRouter } from 'vue-router';
- 调用
const router = useRouter();
目标页需要的方法
主要是对传递来的参数，进行接收，比如查询参数，页面路径,标题，hash等
import { useRoute } from 'vue-router';
- 调用
const route = useRouter();
route里面的数据会被处理成响应式
页面同tab跳转
-
push(to)：跳转到指定的路由，可以接收一个path或包含path的对象。
当前页文章来源：https://www.toymoban.com/news/detail-428095.html
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')
目标页文章来源地址https://www.toymoban.com/news/detail-428095.html
import { useRoute } from 'vue-router';
const route = useRoute();
route.query.page_id || ''
到了这里，关于vue3 的router跳转 - 页面同tab跳转和打开新tab跳转的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
