VueJs vue-router связывает внешний сайт - PullRequest
Новая
       22

VueJs vue-router связывает внешний сайт

0 голосов
/ 01 июня 2018

Это может быть просто, но я просмотрел документацию и ничего не могу найти по этому поводу.Я хочу, чтобы моя ссылка на github была перенаправлена ​​на github.com.Однако он просто добавляет 'https://github.com' к моему URL вместо того, чтобы переходить по ссылке.Вот фрагмент кода: 

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

(Это использует iView для пользовательского CSS, но 'to' работает так же, как и ссылка на маршрутизатор).

В конечном итоге это происходит: enter image description here

Ответы [ 6 ]

0 голосов
/ 26 августа 2019

Более динамичный способ, если вам нужно, это просто переопределить определенные методы, чтобы определить, когда маршрут должен обрабатываться внешним способом, используя 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()
  })
0 голосов
/ 25 мая 2019 

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>
0 голосов
/ 11 апреля 2019

Просто поместите блок ссылок в элемент крошки, как это: 

 <BreadcrumbItem>
  <a href="https://github.com">
    <Icon type="social-github"/>
  </a>
 </BreadcrumbItem>
0 голосов
/ 18 сентября 2018 
<a :href="'//' + websiteUrl" target="_blank">
  {{ url }}
</a>
0 голосов
/ 01 июня 2018

Я прочитал ссылку Даниила и нашел обходной путь: 

{
     path: '/github',
     beforeEnter() {location.href = 'http://github.com'}
}
0 голосов
/ 01 июня 2018

Вы можете либо:

  • использовать обычную ссылку <a href=...
  • использовать обработчик @click и изменить window.location = http:// там.
...