Nuxt Menu links from API...我如何检测它是 Nuxt link :to 还是 :href？

Question

我从 API :

构建我的主菜单

  <b-navbar-nav>
        <div v-for="result in resultsmenu" :key="result.id">
       <span class="hoverlink">
  <nuxt-link  :to="result.slug">{{result.title}}</nuxt-link>
    </span>
     </div>
      </b-navbar-nav>

一切正常，但 API 的菜单中有一个问题 ..一个 link 是外部的，带有“href”，例如：https://ww.instagram.com 所以 nuxt-link 像内部路由一样处理它，我最终得到：

http://localhost:3000/https://ww.instagram.com

我想知道是否有办法告诉 Nuxt，如果 link 是一个“href”类型：“link”来像外部 link 一样处理它一个 nuxt-link 到： ?

谢谢

Answer 1

实现此目的的一种方法是使用计算属性.

假设您的 resultsmenu 数据类似于...

resultsmenu: [
  {slug: 'http://www.website.com', title: 'link to website.com'},
  {slug: '/test', title: 'link to a website.com'},
  {slug: '/yay', title: 'link to b website.com'},
  {slug: 'http://www.website.com', title: 'link to c website.com'}
]

你可以做到...

computed: {
  menuLinks() {
    let links = []
    this.resultsmenu.forEach(link => {
      let menuItem = {}
      menuItem.isHttp = !!link.slug.includes('http');
      menuItem.target = link.slug
      menuItem.title = link.title
      links.push(menuItem)
    })
    return links
  }
}

然后在您的模板中：

<div v-for="(result, index) in menuLinks" :key="index">
  <span>
    <nuxt-link v-if="!result.isHttp" :to="result.target">{{result.title}}</nuxt-link>
    <a v-else :href="result.target">{{result.title}}</a>
  </span>
</div>

Nuxt Menu links from API...我如何检测它是 Nuxt link :to 还是 :href？

Nuxt Menu links from API...How can i detect if its a Nuxt link :to or :href?

api

vue.js

menu

nuxt.js

href