VUE动态组件区分路由链接或外部链接

本文介绍了一种Vue项目中实现动态路由与外部链接的方法,通过定义动态组件Link.vue,根据传入链接的不同,智能选择使用`router-link`或`a`标签进行处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这是从 vue-element-ui 项目中学习到的很独特的写法。

我们在写前后端分离+权限控制的项目时,常常会使用后端返回的数据来渲染出侧边菜单结构,通常点击最后一级菜单进行路由跳转,但是有时候我这个是一个外部链接,当然可以使用 v-if 进行判断,但是 v-if 写的太多就很繁琐,而且人家这个新写法真的很好,所以在此记录一下!

先定义一个动态组件[官方文档],Link.vue

<template>
<!-- 这里用v-bind主要是为了接收父组件传值后进行动态处理,否则无法主动进行判断并返回 -->
  <component :is="type" v-bind="linkProps(to)">
    <!-- slot 就是占位,可以自定义内容,如果什么都不写,那么父组件使用这个组件时内部写的东西无效 -->
    <slot />
  </component>
</template>

<script>

export default {
/* 父组件必须要传值的属性 */
  props: {
    to: {
      type: String,
      required: true
    }
  },
  computed: {
    //   这里写个简单的判断方法判断传过来的地址是不是一个外部链接
    isExternal() {
      return this.to === "https://www.baidu.com"
    },
    /* 这个type的返回值对应到 组件的 is 属性,决定了它本质上是个什么标签 */
    type() {
        // 外部组件,以 a 标签处理
      if (this.isExternal) {
        return 'a'
      }
    //   内部链接,进行路由
      return 'router-link'
    }
  },
  methods: {
    //   接收到父组件传值后的处理
    linkProps(to) {
        // 外部链接
      if (this.isExternal) {
        //   返回 a 标签接收的参数
        return {
          href: to,
          target: '_blank',
          rel: 'noopener'
        }
      }
    //   内部链接,返回 router-link 组件接收的参数,相当于 <router-link to=>
      return {
        to: to
      }
    }
  }
}
</script>

在别的组件中引入它,这里我就不贴完整内容了,等会看看效果即可。

<el-container>
    <el-main>
        // 使用子组件,根据我们在Link组件中的逻辑,百度会被处理成a标签跳转
        // /google 会被作为内部路由,使用 <router-link to="/googel"/> 处理
        <link-to to="https://www.baidu.com">百度一下?</link-to>
        <link-to to="/google">谷歌谷歌</link-to>
    </el-main>
</el-container>

<script>
import LinkTo from "@/components/Link";

export default {
    name: "index",
    components: {
        LinkTo
    },
</script>

页面效果
在这里插入图片描述
点击 百度一下 ,打开了一个新窗口
在这里插入图片描述
点击 谷歌谷歌 ,
在这里插入图片描述
因为我们没有配置 /google 的路由跳转,所以被系统的 /404 路由处理。

### Vue 中实现点击路由跳转到外部网站的功能 在 Vue 应用程序中,如果需要通过点击操作来跳转至外部网站,则无法直接利用 `vue-router` 提供的内置方法(如 `router.push()` `<router-link>`),因为这些方法仅适用于项目内部的路由管理。对于外部链接的处理,通常采用原生 JavaScript 方法 HTML 属性。 以下是几种常见的实现方式: #### 1. 使用 `window.location.href` 可以通过设置 `window.location.href` 来重定向浏览器地址栏的内容,从而实现跳转到指定的外部网址。 ```javascript methods: { redirectToExternalSite() { window.location.href = 'https://www.example.com'; // 替换为目标站点 URL [^2] } } ``` 此方法会替换当前页面并加载新的网页内容。 --- #### 2. 使用 `window.open` 打开新标签页 为了提升用户体验,可以选择在一个新标签页中打开目标网站,而不是覆盖当前页面。这可通过调用 `window.open(url, '_blank')` 实现: ```javascript methods: { openInNewTab() { window.open('https://www.example.com', '_blank'); // 新窗口/标签页打开 [^2] } } ``` 注意:某些情况下,浏览器可能会阻止弹窗行为(取决于用户的隐私设置)。因此建议将该函数绑定到用户交互事件(如按钮点击)上触发。 --- #### 3. 结合模板中的超链接 (`<a>`) 标签 最简单的方式是在组件模板里定义标准的 HTML 链接元素,并为其添加必要的属性: ```html <a :href="externalUrl" target="_blank">访问外部网站</a> <script> export default { data() { return { externalUrl: 'https://www.example.com' // 动态赋值给 href 属性 [^3] }; } }; </script> ``` 这种方式不仅语义清晰而且兼容性强,推荐作为首选方案之一。 --- #### 4. 自定义动态路由匹配规则 (高级场景) 假如希望更灵活地控制哪些路径应导向外部资源而非本地视图文件,则可以在配置阶段引入占位符逻辑。例如下面的例子展示了如何基于参数判断是否需转向特定主机编辑界面还是实际存在的远程服务端口地址: ```javascript // routes.js import PLACEHOLDER from './components/Placeholder.vue'; const routes = [ { path: '/hosts/:host_id/edit', component: PLACEHOLDER, beforeEnter(to, _, next) { if (/^\d+$/.test(to.params.host_id)) { // 判断 host_id 是否合法编号形式 [^4] const fullUrl = `${process.env.VUE_APP_EXTERNAL_BASE_URL}${to.path}`; location.href = fullUrl; } else { console.error(`Invalid ID detected in route "${to.fullPath}"`); next(false); } }, meta: {} } ]; ``` 以上代码片段说明了当满足一定条件时自动完成跨域请求转发的过程。 --- ### 总结 综上所述,在 Vue 中实现点击后跳转到外部网站主要有四种途径:借助全局对象改变当前位置、开启独立浏览空间展示目的站信息、运用基础标记语言构建直观连接入口以及制定详尽策略区分不同类型的寻址需求。开发者应当依据具体应用场景选取最适合的技术手段加以应用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值