Маршрутизатор Vue, связывающий внешние веб-сайты

#javascript #html #vue.js #vue-router

#javascript #HTML #vue.js #vue-маршрутизатор

Вопрос:

Пожалуйста, помогите. У меня есть JSON-файл с кучей URL-ссылок. Некоторые из них являются внутренними, а некоторые — внешними.

JSON выглядит следующим образом.

 [
 {stuff..., "Url":"https://www.google.com/", stuff..},
 {stuff..., "Url":"/internal-link", stuff..}
]

И код vue выглядит следующим образом.

 <div class="mobile-link" v-for="link in json" :key="link.id">
  <router-link :to="link.Url">{{link.Name}}</router-link>
</div>

Когда внутренняя ссылка передается на <router-link> сайт, это нормально, но когда она передает внешнюю ссылку, она не перенаправляет на внешний веб-сайт.

Каков наилучший способ отличить внешние ссылки и каким-то образом передать их через <router-link> перенаправление и?

Я хотел бы сохранить эти ссылки в одном JSON.

Спасибо за ответы <3

1. вероятно, вам следует просто использовать a тег для внешних ссылок

2. вы могли бы добавить логический флаг к каждому объекту ссылки, указав, является ли он внешним или нет — в качестве альтернативы, вы могли бы проверить, начинается ли ссылка с / и наивно сказать, что это означает внутреннюю ссылку, а все остальное является внешней ссылкой

Ответ №1:

Вы можете делать что-то вроде:

 [
 {stuff..., "URL":"https://www.google.com/", "external" : true},
 {stuff..., "URL":"/internal-link", "external": false}
]

А затем в компоненте vue

 <div class="mobile-link" v-for="link in json" :key="link.id">
<a v-if="link.external" :href="link.url">{{ link.Name }]</a>
<router-link v-else :to="link.Url">{{link.Name}}</router-link>
</div>

Если вы не можете редактировать свой массив напрямую, используйте map function with regex ^(http|https):// .

Ответ №2:

Как показано в вашем JSON, вы можете использовать регулярное выражение, чтобы определить, является ли URL-адрес локальным или внешним.

Итак, что-то вроде

 <a v-if="/https?:///.test(link.Url)" href="link.Url"></a>
<router-link v-else :to="link.Url">{{link.Name}}</router-link>

Ofc, создание компонента, который выполняет это условие, будет более чистым. : D

Вот интересное сообщение в блоге о том, как этого добиться. Это говорит о Nuxt.js но это в основном то же самое, если вы хотите использовать его только для Vue.
https://lihbr.com/blog/one-link-component-to-rule-them-all