add[components]: link

Author: bujidao

src/components/Link/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <!-- eslint-disable vue/require-component-is -->
+  <component v-bind="linkProps(to)">
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+import { isExternal } from '@/utils/validate.js'
+export default {
+  name: 'Link',
+  props: {
+    to: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    linkProps (url) {
+      if (isExternal(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_black',
+          rel: 'noopener'
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/lang/en.js

@@ -1,5 +1,6 @@
 export default {
   app: {
-    welcome: 'Welcome to Your Vue.js App'
+    welcome: 'Welcome to Your Vue.js App',
+    vueOfficialWebsite: 'vue Official Website'
   }
 }

src/lang/zh.js

@@ -1,5 +1,6 @@
 export default {
   app: {
-    welcome: '欢迎来到Vue世界'
+    welcome: '欢迎来到Vue世界',
+    vueOfficialWebsite: 'vue 官方网站'
   }
 }

src/utils/validate.js

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param path
+ * @returns {boolean}
+ */
+export function isExternal (path) {
+  return /^(https?:|mailto:|tel:|ftp:)/.test(path)
+}

src/views/index.vue

@@ -2,16 +2,21 @@
     <div>
       <p>{{msg}}</p>
       <p>{{$t('app.welcome')}}</p>
+      <app-link to="https://vuejs.org/">{{$t('app.vueOfficialWebsite')}}</app-link>
     </div>
 </template>
 
 <script>
+import AppLink from '@/components/Link/index'
 export default {
   name: 'index',
   data () {
     return {
       msg: 'i am vue demo'
     }
+  },
+  components: {
+    AppLink
   }
 }
 </script>