VueJs vue-router 链接外部网站答案

【问题标题】：VueJs vue-router linking an external websiteVueJs vue-router 链接外部网站
【发布时间】：2018-11-10 23:31:53
【问题描述】：

这可能很简单，但我查看了文档并找不到任何相关信息。我想让我的“github”链接重定向到 github.com。但是，它只是将“https://github.com”附加到我的网址，而不是点击链接。这是一个sn-p：

 <BreadcrumbItem to='https://github.com'>
    <Icon type="social-github"></Icon>
 </BreadcrumbItem>

（这是为自定义 CSS 使用 iView，但 'to' 的工作方式与 router-link 相同）。

最终发生的事情是这样的：

【问题讨论】：

对于外部链接，只需使用<a href="..."> 直接指向您要链接的任何内容。 vue-router 仅用于内部链接。
考虑到我不能在此处使用标记，并且它被放弃为“to”，这并不真正起作用
现在，至少，that's how it works。 <a> 标签没有被“放弃”； to 是一个 vue 结构，它让路由器有机会重写 url 以指向 SPA。一种方法是将该逻辑构建到您的 BreadcrumbItem 组件中，如果属性具有 http(s) 协议，则使用 <a href="...">，否则使用 <router-link>。
谢谢，该线程中的某个人也有一个很好的解决方法。
现在我看：Vue2 navigate to external url with location.href 的可能重复项（其中一个答案包括我不知道的另一种技术——“导航守卫”——如果你只有一个小的可能适合这里要处理的外部链接数）

标签： css vue.js vuejs2 vue-router routerlink

【解决方案1】：

我阅读了 Daniel 的链接并找到了解决方法：

{
     path: '/github',
     beforeEnter() {location.href = 'http://github.com'}
}

【讨论】：

【解决方案2】：

<a :href="'//' + websiteUrl" target="_blank">
  {{ url }}
</a>

【讨论】：

【解决方案3】：

如果你使用vuetify，你可以使用v-list-item、v-card或v-btn。

它们都有一个属性 target，您可以将其设置为 _blank 例如：

<v-list-item href="https://google.com" target="_blank">Google</v-list-item>

【讨论】：

【解决方案4】：

您可以：

使用普通链接<a href=...
使用@click 处理程序并在此处更改window.location = http://。

【讨论】：

我认为你不能在 click 事件处理程序中使用 window.location 。我应该是 window.location.href = "http://...."
没有。我希望能够右键单击该链接。
没有。我希望能够在一个组件中没有 2 个解决方案的情况下使用 :to="var"。

【解决方案5】：

const github = { template: '<div>github</div>'}

	const routes = [
		{ 
			path: '/github',
			beforeEnter() {location.href = 'http://github.com'},
			component: github
		}
		]

	const router = new VueRouter({
		routes
		})

	const app = new Vue({
		router
		}).$mount('#app')

<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	  <script src="https://unpkg.com/vue/dist/vue.js"></script>
	  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
<body>    
<div id="app">
  <li><router-link to="/github">github.com</router-link></li>
  <router-view></router-view>
</div>
</body>

【讨论】：

这对于一个简单的函数来说太过分了。

【解决方案6】：

如果您需要，一种更动态的方法是重写某些方法，以检测何时应该使用route.meta.external 以外部方式处理路由：

  // Override matcher to fix external links.
  const match = router.matcher.match
  router.matcher.match = (...args) => {
    let route = match.apply(router, args)
    if (!route.meta.external) {
      return route
    }
    return Object.freeze({...route, fullPath: route.path})
  }

  // Override resolver to fix external links.
  const resolve = router.resolve
  router.resolve = (...args) => {
    const resolved = resolve.apply(router, args)
    if (resolved.route.meta.external) {
      resolved.href = resolved.route.fullPath
    }
    return resolved
  }

  // Handle external routes.
  router.beforeEach((to, from, next) => {
    if (to.meta.external) {
      if (to.meta.newWindow) {
        window.open(to.fullPath)
      }
      else {
        window.location.replace(to.fullPath)
      }
      return next(false)
    }
    next()
  })

【讨论】：

【解决方案7】：

只需将链接块放在面包屑项中，如下所示：

 <BreadcrumbItem>
  <a href="https://github.com">
    <Icon type="social-github"/>
  </a>
 </BreadcrumbItem>

【讨论】：

【解决方案8】：

只需使用“//”而不是 http 或 https。这在路由器文件中对我有用。

【讨论】：

【解决方案9】：

我将在我的路由器配置文件中创建一个新路由，并在新选项卡中打开我的外部链接的路由。

{
  name: "Github",
  beforeEnter() {
    window.open('https://www.github.com/', '_blank')
  },
},

然后在我的模板中，我将创建一个简单的按钮，通过外部链接调用新路由的函数。

<button @click="onUserClick('Github')">Github</button>

setup () {
  const router = useRouter()
  const onUserClick = (linkTo) => {
    router.push({ name: linkTo })
  }
  return {onUserClick}
}

这将允许您非常轻松地连接到外部路由的多个链接。 IE 社交媒体页面不会弄乱您的组件。

【讨论】：