Este puede ser simple, pero he visto más de documentación y no puede encontrar nada al respecto. Quiero tener mi github enlace de redirección decir, github.com. Sin embargo, tan solo agregando ‘https://github.com‘ a mi url en lugar de seguir el enlace. He aquí un fragmento:

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

(Esto es usando la iView para CSS personalizado, pero ‘a’ funciona de la misma manera como router-link).

Lo que termina pasando es este:
VueJs vue-router que conecte a un sitio web externo

  • Para los enlaces externos, sólo tiene que utilizar <a href="..."> para apuntar directamente a lo que usted está vinculando. vue-router sólo es necesaria para los enlaces internos.
  • Que en realidad no funciona, teniendo en cuenta que no puede usar el <a> etiqueta de aquí, y a su ser abandonado por ‘a’
  • Por ahora, al menos, que es cómo funciona. El <a> etiqueta no es ser «abandonado»; to es un vue constructo que da el router una oportunidad para reescribir la url a punto de volver a la SPA. Una forma sería la de construir esa lógica en su BreadcrumbItem componente, el uso de <a href="..."> si el atributo tiene un http(s) de protocolo o <router-link> lo contrario.
  • Gracias, alguien en que el hilo había una buena solución así.
  • Ahora que miro: Posibles duplicados de Vue2 vaya a la dirección url externa con la ubicación.href (Una respuesta no incluye otra técnica que yo no sabía acerca de — «navegación » guardias» — que pueden traje aquí si sólo tiene un pequeño número de enlaces externos a tratar)
InformationsquelleAutor nateph | 2018-05-31

7 Comentarios

  1. 12

    He leído de Daniel Link y encontró una solución:

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

    Usted puede:

    • el uso de un enlace normal <a href=...
    • el uso de un @haga clic en el controlador y el cambio window.location = http:// allí.
    • Creo que no se puede utilizar la ventana.ubicación dentro de un controlador de eventos click. Yo debo de ser de la ventana.ubicación.href = «http://….»
    • de la ventana.open(«full http:// etc») trabajó para abrir una ventana nueva para mí.
  3. 0

    Acabo de poner el enlace de bloque dentro de la ruta de exploración elemento como este:

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

    JS:

    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')

    HTML:

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

    • Esto es excesivo para una simple función.
  5. 0

    Una manera más dinámica si lo que necesitas es simplemente reemplazar ciertos métodos para detectar cuando una ruta debe ser manejado de una manera externa mediante 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()
      })
  6. 0

    Si utiliza vuetify, puede utilizar v elemento de lista de, v-tarjeta de o v-btn.

    Todos ellos tienen una propiedad objetivo en la que puede establecer _blank por ejemplo:

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

Dejar respuesta

Please enter your comment!
Please enter your name here