web-dev-qa-db-fra.com

VueJs vue-router reliant un site Web externe

Cela peut être simple, mais j'ai parcouru la documentation et je n'y trouve rien. Je veux que mon lien "github" soit redirigé vers github.com. Cependant, il suffit d'ajouter ' https://github.com ' à mon URL au lieu de suivre le lien. Voici un extrait:

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

(Ceci utilise iView pour CSS personnalisé, mais "to" fonctionne de la même manière que le routeur-lien).

Ce qui finit par se produire est le suivant: enter image description here

cssvue.jsvuejs2vue-routerrouterlink
12
nateph
<a :href="'//' + websiteUrl" target="_blank">
  {{ url }}
</a>
4
user3757628

J'ai lu le lien de Daniel et trouvé une solution de contournement:

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

Tu peux soit:

  • utiliser un lien normal <a href=...
  • utilisez un gestionnaire @click et modifiez window.location = http:// Là.
1
Aurélien Bottazini
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
Luke Marak

Placez simplement le bloc de lien à l'intérieur de l'élément de fil d'Ariane comme ceci:

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