vue中的外链跳转怎么写

Vue中使用router-link组件实现跳转：

<router-link :to="'https://www.example.com'">外部链接</router-link>

如果需要直接通过 JavaScript 实现跳转，可以使用以下代码：

window.location.href = 'https://www.example.com'

相关问题

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。

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

vue-router跳转外链

在Vue.js中使用vue-router跳转外链，可以使用`<router-link>`标签或者`this.$router.push()`方法。

使用`<router-link>`标签跳转外链，只需要在`to`属性中传入外链地址即可，例如：

<router-link to="https://www.baidu.com">跳转到百度</router-link>

使用`this.$router.push()`方法跳转外链，需要传入一个包含`path`属性的路由对象，`path`属性即为要跳转的外链地址，例如：

this.$router.push({ path: 'https://www.baidu.com' })

需要注意的是，使用`<router-link>`标签跳转外链时，会在新窗口中打开外链；而使用`this.$router.push()`方法跳转外链时，会在当前窗口中打开外链，需要自行处理是否在新窗口中打开外链的逻辑。