背景需求

最近遇到一个需求，要求在某个组件的点击后，跳到新打开一个窗口进行浏览。

注意不是template里面的，假如是template的话直使用route-link的功能就能满足。

对单页应用来说，使用router的函数的方法是做不到的，都是在当前窗口打开的，必须借用window.open。

解决方法

借助window.open + router.resolve方法实现。

通过vue-router的官方api，发现有一个resolve的方法resolve：

大概意思就是说，根据传入的参数，返回一个路由，包含当前base的href属性，这样就可以使用这个href去打开了。有了这个，结合widnow.open就可以了。

具体实现代码

<template>
    <component @click=onClick() />
</template>
<script lang="ts" setup>
    import { useRouter } from 'vue-router';
    
    const router = useRouter();
    
    const onClick = () => {
        const routerData = router.resolve({
            // 路由名称， 比如user-detail
            name: 'routerName',
            
             // 路由参数，可选
            query: {
                userId: 31273812,
              },
         });
         
          // 新窗口打开
          window.open(routerData.href, '_blank');
    }
</script