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

CodePudding user response：

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

CodePudding user response：

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

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