Question

我正在尝试构建一个简单的Vue应用，其中路由器链接将基于从服务器接收到的数据，数据就是这样。

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

现在我要实现的是动态路由器链接元素，如果window.location.href字段不为null，则将使用url，否则我希望它只是一个路由器链接。目前，我所做的无法正常工作，它会不断抛出诸如TypeError: Cannot read property 'redirect' of undefined之类的错误。这是我的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>

如您所见，我正在为我的方法中的方法使用自定义方法，并且类似这样

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

但是我的Vue应用程序崩溃了，什么也没显示，我有什么办法可以做到这一点？

Answer 1

to中的

router-link应该只使用链接的名称。

您不需要自定义方法即可执行此操作。更好的方法是在网址重定向的情况下使用<a>标签：

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

如果要使用单独的功能来保持实现，请再次使用<a>代替router-link，如下所示：

<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}`);
    }
  }
}

Vue路由器有条件重定向？

1 个答案: