Estoy tratando de crear una aplicación Vue simple en la que los enlaces del enrutador se basen en los datos recibidos del servidor, los datos son algo como esto.

id: 1
path: "category_image/About.jpg"
slug: "about"
subtitle: null
title: "About Us"
url: "http://archeoportal.loc/page/about"

Ahora lo que estoy tratando de lograr son elementos dinámicos de enlace de enrutador que usarían window.location.href si el campo url no es nulo; de lo contrario, quiero que sea solo un enlace de enrutador. Actualmente lo que he hecho no funciona, sigue arrojando errores como TypeError: Cannot read property 'redirect' of undefined. Así es como se ve mi archivo Vue

<router-link
  :to="this.redirect(category.url !== null ? category.url : category.slug, category.url !== null ? true : false)"
  class="grid-item"
  v-bind:key="category.id"
  v-for="category in this.categories"
>
    <div class="category-title py-4">
      <h2>{{ category.title }}</h2>
      <p>{{ category.description }}</p>
    </div>
  <img :src="`/storage/${category.path}`" />
</router-link>

Como puede ver, estoy usando un método personalizado para lo que está en mis métodos y es algo como esto

methods:{
  redirect(url, window){
    if(window == true){
      window.location.href = url;
    }else{
      this.router.push('url');
    }
  }
}

Pero mi aplicación Vue se bloqueó y no muestra nada, ¿hay alguna forma de lograrlo?

2
Areg 30 ago. 2020 a las 00:49

1 respuesta

La mejor respuesta

to en router-link solo debe llevar el nombre del enlace.

No necesita un método personalizado para hacer esto. Una mejor manera de hacer esto sería usar etiquetas <a> en caso de redirección de URL:

<div 
  v-for="category in this.categories"
  :key="category.id"
>
  <a 
    v-if="category.url"
    :href="category.url"
  >
    <div class="category-title py-4">
      <h2>{{ category.title }}</h2>
      <p>{{ category.description }}</p>
    </div>
  </a>
  <router-link
    v-else
    :to="`/${category.slug}`"
    class="grid-item"
  >
    <div class="category-title py-4">
      <h2>{{ category.title }}</h2>
      <p>{{ category.description }}</p>
    </div>
    <img :src="`/storage/${category.path}`" />
  </router-link>
</div>

Si desea mantener la implementación usando una función separada, nuevamente use <a> en lugar de router-link de la siguiente manera:

<a
  @click="redirect(category.url !== null ? category.url : category.slug, category.url !== null)"
  ...
>
methods: {
  redirect(url, isRedirect) {           
    if (isRedirect === true) {
      window.open(url);
    } else {
      this.router.push(`/${url}`);
    }
  }
}
1
Majed Badawi 29 ago. 2020 a las 22:11