背景
根据 百度谷歌, 我们知道如果要在Vue项目中跳转其他网站, 只能通过<a>标签, 而RouteLink组件只能跳转相对路径.
所以如果要跳转外链, 只能写死<a>, 但在我的项目中, Path是一个变量, 它可能是本网站(相对路径), 也可能是外链, 如http://baidu.com, 所以没办法再代码中写死用<a>或者<router-link>.
最后写出的代码可能是这样的:
<router-link v-if="path==='http://baidu.com'" :to="{path: path}">
这是子组件
</router-link>
<a v-else :href="path">
这是子组件
</a>
咋一看没问题, 但是会发生重复编写此子组件代码的问题, 不是最佳解决方案.
那么RouterLink组件到底能不能实现跳转外链呢? 官方文档没有说那就再翻看源码, 也发现并不能, 所有只有自己实现了.
编写一个可以跳转外链的RouterLink
方法1: 可以自己再实现一次RouterLink, 虽然代码量不多, 但也算是重复代码了, 我们希望代码越少越好.
方法2: 包装一次RouterLink, 代码如下.
<!--
支持外链的RouterLink, 只需要包装一次默认的router-link.
-->
<template>
<!-- 以斜杠/开头的路径会被判定为内链, 否则是外链 你可以自己修改此逻辑 -->
<a v-if="to.path && to.path[0] !== '/'" :href="to.path" :target="target">
<slot></slot>
</a>
<router-link v-else v-bind="vProps">
<slot></slot>
</router-link>
</template>
<script>
export default {
name: 'XRouterLink',
props: {
to: {
type: Object,
default: {path: '/'},
required: true,
},
target: {
type: String,
default: ''
},
},
computed: {
vProps() {
// https://cn.vuejs.org/v2/api/#vm-attrs
// 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
// 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
return {...this.$props, ...this.$attrs}
}
},
}
</script>
使用这个组件
<!-- 内链, 点击之后在项目内跳转 -->
<XRouterLink to="/home"></XRouterLink>
<!-- 外链, 点击之后跳转到其他网站: 百度 -->
<XRouterLink to="https://baidu.com"></XRouterLink>
