vue3 外链跳转携带token不显示在地址栏

你可以使用 Vue Router 的导航守卫来实现外链跳转时携带 token 但不显示在地址栏中。下面是一种可能的解决方案：

1. 首先，确保你已经安装了 Vue Router，并在项目中引入它。

2. 在路由文件中，定义一个全局前置守卫（global before guard），用来拦截所有的外链跳转。

import router from './router'

router.beforeEach((to, from, next) => {
  // 判断是否是外链跳转
  if (to.meta.externalLink) {
    // 获取 token
    const token = 'your_token_here'
    
    // 创建一个隐藏的表单，用于提交 token
    const form = document.createElement('form')
    form.action = to.path
    form.method = 'post'
    
    // 创建一个隐藏的输入框，存放 token
    const tokenInput = document.createElement('input')
    tokenInput.type = 'hidden'
    tokenInput.name = 'token'
    tokenInput.value = token
    
    // 将输入框添加到表单中
    form.appendChild(tokenInput)
    
    // 将表单添加到页面中
    document.body.appendChild(form)
    
    // 提交表单
    form.submit()
  } else {
    next()
  }
})

3. 在定义路由时，为外链跳转的路由添加一个 meta 属性，用来标识它是外链跳转。

const routes = [
  {
    path: '/external',
    name: 'ExternalLink',
    component: ExternalLink,
    meta: {
      externalLink: true
    }
  },
  // 其他路由...
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这样，当用户点击一个带有 `externalLink` meta 属性的链接时，会触发全局前置守卫，创建一个隐藏的表单，将 token 作为参数提交，然后页面会进行跳转，但地址栏中并不会显示 token。

请注意，这只是一种解决方案，具体实现可能因你的项目结构和需求而有所不同。你需要根据实际情况进行调整和优化。