前言
在开发中,点击某个按钮,跳转路由,并且跳转到新的页面,不在本页面展示,其实方法很简单,采用js自带的API就可以实现👇👇👇
思路分析
首先需要在路由中添加该跳转的路由,使用js open 方法实现跳转,并且可以携带参数
代码
路由
export const previewRoute= [
{
path:'/preview',
component:()=> import('@路由页面地址')
}
]
const router = createRouter({
history: createWebHistory(),
routes: [
...constantRoutes,
...userRoutes,
...dataRoutes,
...searchRoutes,
...productRoutes,
...refreshRoute,
...previewRoute,
],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 };
}
},
});
前端代码
<template>
<button @click='previewClick'>跳转新页面</button>
</template>
<script>
import { useRouter } from 'vue-router'
const router = useRouter()
// 本页面跳转
const previewClick = (userId) => {
router.push({
path: '/preview',
query: { userId: userId }
})
}
// 跳转到新页面
const previewClick = (userId) => {
window.open(`/preview?id=${userId}`, '_blank')
}
</script>
新页面-获取传递过来的值
// 获取传递过来的参数
const queryString = window.location.search; // 获取地址栏数据
const params = new URLSearchParams(queryString)
const userId = params.get('id')