diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue
index c73080abb8..93174cb089 100644
--- a/packages/@vuepress/theme-default/components/NavLink.vue
+++ b/packages/@vuepress/theme-default/components/NavLink.vue
@@ -3,7 +3,7 @@
class="nav-link"
:to="link"
@focusout.native="focusoutAction"
- v-if="!isExternal(link)"
+ v-if="isInternal"
:exact="exact"
>{{ item.text }}
{{ item.text }}
-
+
@@ -39,13 +39,42 @@ export default {
return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
}
return this.link === '/'
+ },
+
+ isNonHttpURI () {
+ return isMailto(this.link) || isTel(this.link)
+ },
+
+ isBlankTarget () {
+ return this.target === '_blank'
+ },
+
+ isInternal () {
+ return !isExternal(this.link) && !this.isBlankTarget
+ },
+
+ target () {
+ if (this.isNonHttpURI) {
+ return null
+ }
+ if (this.item.target) {
+ return this.item.target
+ }
+ return isExternal(this.link) ? '_blank' : ''
+ },
+
+ rel () {
+ if (this.isNonHttpURI) {
+ return null
+ }
+ if (this.item.rel) {
+ return this.item.rel
+ }
+ return this.isBlankTarget ? 'noopener noreferrer' : ''
}
},
methods: {
- isExternal,
- isMailto,
- isTel,
focusoutAction () {
this.$emit('focusout')
}
diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md
index 1b69f64348..0ecc1a4437 100644
--- a/packages/docs/docs/theme/default-theme-config.md
+++ b/packages/docs/docs/theme/default-theme-config.md
@@ -54,6 +54,20 @@ module.exports = {
}
```
+Outbound links automatically get `target="_blank" rel="noopener noreferrer"`. You can offer `target` and `rel` to customize the attributes:
+
+``` js
+// .vuepress/config.js
+module.exports = {
+ themeConfig: {
+ nav: [
+ { text: 'External', link: 'https://google.com', target:'_self', rel:'' },
+ { text: 'Guide', link: '/guide/', target:'_blank' }
+ ]
+ }
+}
+```
+
These links can also be dropdown menus if you provide an array of `items` instead of a `link`:
```js
diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md
index 410f2728ba..62e24b37f5 100644
--- a/packages/docs/docs/zh/theme/default-theme-config.md
+++ b/packages/docs/docs/zh/theme/default-theme-config.md
@@ -48,6 +48,21 @@ module.exports = {
]
}
}
+
+
+```
+外部链接 `` 标签的特性将默认包含`target="_blank" rel="noopener noreferrer"`,你可以提供 `target` 与 `rel`,它们将被作为特性被增加到 `` 标签上:
+
+``` js
+// .vuepress/config.js
+module.exports = {
+ themeConfig: {
+ nav: [
+ { text: 'External', link: 'https://google.com', target:'_self', rel:'' },
+ { text: 'Guide', link: '/guide/', target:'_blank' }
+ ]
+ }
+}
```
当你提供了一个 `items` 数组而不是一个单一的 `link` 时,它将显示为一个 `下拉列表` :