Question

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

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

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

最终发生的事情是：

Answer 1

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

Answer 2

我读了丹尼尔的链接并找到了解决方法：

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

Answer 3

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

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

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

Answer 4

你可以：

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

Answer 5

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

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

Answer 6

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>

Answer 7

如果需要，一种更动态的方法是仅覆盖某些方法以检测何时应使用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()
  })

Answer 8

我这样做的方法是使用方法

   Dim i As Integer
   Dim MyDictionary As Dictionary
   Dim MyWords(1) As String
   
   Set MyDictionary = New Dictionary
   MyDictionary.Add "Lorem ipsum1", "Lorem ipsum1"
   MyDictionary.Add "Lorem ipsum2", "Lorem ipsum2"
   MyDictionary.Add "Lorem ipsum3", "Lorem ipsum3"

   MyWords(0) = "Lorem ipsum2"
   MyWords(1) = "Lorem ipsum4"

   For i = LBound(MyWords) To UBound(MyWords)
      If Not MyDictionary.Exists(MyWords(i)) Then
         MsgBox "Words missing from the dictionary"
         Exit For
      End If
   Next

这只是一个例子，我通常在根组件上创建方法，并且可以根据项目类型使用$ parent或使用bus访问它。

VueJs vue-router链接外部网站

8 个答案: