Vue3 - 实现路由 “新开一页“ 进行页面跳转功能,Router 路由跳转时在新窗口打开页面(网站跳转页面时浏览器新开页签打开网页,支持在页面、纯 js/ts 文件中使用,详细示例代码教程)
在Vue 3中,使用Vue Router时,如果你想要在新窗口(新标签页)中打开页面,你可以通过编程式导航结合window.open
方法来实现。
以下是一个简单的示例:
首先,确保你已经安装并设置了Vue Router。
// router.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{ path: '/', component: Home },
// ... 其他路由规则
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
然后,在你的组件中,你可以这样使用:
// 在你的组件中
export default {
methods: {
openNewPage(path) {
const routeData = this.$router.resolve(path);
window.open(routeData.href, '_blank');
}
}
}
在模板中,你可以这样使用该方法:
<template>
<button @click="openNewPage({ path: '/some-route' })">在新页面打开</button>
</template>
这样,当用户点击按钮时,将会在新的浏览器标签页中打开指定路由的页面。
评论已关闭