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

Question

I'm working on a project with Vue3 to list all universities in Sweden and are having problems with RouterLink to take the user to an external page and the universities official webpage. Does any one have some tips to fix this problem?

This is my App.vue file:

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

And this is 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>

Thanks in advance!

Answer 1

You should just use anchor tag, RouterLink is for internal routes

Answer 2

Router link only works in your project, so you should use

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