我如何使用 RouterLink 访问 Vue3 中的外部页面？

Question

我正在使用 Vue3 开展一个项目以列出瑞典的所有大学，但在 RouterLink 将用户带到外部页面和大学官方网页时遇到了问题。有人有解决此问题的一些提示吗？

这是我的 App.vue 文件：

<script>
import TheHeader from "./components/styling/TheHeader.vue";
import UniversityList from "./pages/universities/UniversityList.vue";

export default {
  components: {
    TheHeader,
    UniversityList
  }
}

</script>

<template>
  <TheHeader />
  <university-list v-for="res in universities"
  :name="res.name"
  :country="res.country"
  :web_pages="res.web_pages"
  ></university-list>
  <RouterView/>
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;700&display=swap');

html {
  font-family: 'Epilogue', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

</style>

这是UniversityList.vue

<template><ul>
    <li v-for="university in universities">
<div class="info">
    <h3>{{ university.name }}, {{ university.country }}</h3>
    <RouterLink v-bind:to="university.web_pages">Källa</RouterLink>
</div>
</li>
</ul>
<RouterView/>
</template>

<script>

export default {
    created() {
    fetch('http://universities.hipolabs.com/search?country=Sweden')
    .then((response) => response.json())
    .then((result) => {
      this.universities = result 
    })
  },
  data() {
    return { universities: null}
  },
  props: ['name', 'country', 'web_pages']
}
</script>

<style>

body {
    background-color: #dda15e;
}

.info {
max-width: 800px;
  margin: 15px auto;
  background: white;
  border: 1px solid #424242;
  border-radius: 12px;
  padding-left: 20px;
}

h3 h4 {
  margin: 1rem 0;
  padding: 1rem;
}

</style>

提前致谢！

Answer 1

你应该只使用锚标记，RouterLink 用于内部路由

Answer 2

路由器link只在你的项目中有效，所以你应该使用

anchor <a href="#"></a>

我如何使用 RouterLink 访问 Vue3 中的外部页面？

How can i use RouterLink to get to an external page in Vue3?

javascript

vue.js

vuejs3