VueJs vue-router linking an external website

问题

This may be simple, but I've looked over documentation and can't find anything about it. I want to have my 'github' link redirect to say, github.com. However, its just appending 'https://github.com' to my url instead of following the link. Here is a snippet:

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

(This is using iView for custom CSS, but 'to' works in the same way as router-link).

What ends up happening is this:

回答1:

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

回答2:

I read Daniel's Link and found a workaround:

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

回答3:

You can either:

use a normal link <a href=...
use a @click handler and change window.location = http:// there.

回答4:

If you use vuetify, you can use v-list-item, v-card or v-btn.

They all have a property target which you can set to _blank e.g.:

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

回答5:

Just put the link block inside the breadcrumb item like this:

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

回答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>

回答7:

A more dynamic way if you need it is to just override certain methods to detect when a route should be handled in an external manner using 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()
  })

来源：https://stackoverflow.com/questions/50633001/vuejs-vue-router-linking-an-external-website

标签

css

Vue.js

vuejs2

vue-router

routerlink