Vue

Vue-router, fetching data


	npm install vue-router

Vue-router

SPA-routing i Vue.js ekosystem https://router.vuejs.org/

Version 4 är kompatibel med Vue 3

Setup av Vue Router


import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

// Definiera "rutterna"
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  // fler...
];

// Skapa router instansen och exportera den
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), 
  routes,
});

export default router;

src/router/index.ts

Uppdatera main.ts


import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

main.ts

Router View och länkar på huvudsidan


<template>
  <div id="app">
    <h1>Welcome to Vue 3 App</h1>
    <nav>
      <router-link to="/">Home</router-link> | 
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/> <!-- Här uppdateras vyn/komponenten -->
  </div>
</template>

<script>
export default {
  name: 'App',
  // ...
};
</script>

App.vue

Dynamiska Routes


import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

// Definiera "rutterna"
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/users/:id', // dynamisk route
    name: 'UserProfile',
    component: UserProfile,
  },
  // fler...
];

// Skapa router instansen och exportera den
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), 
  routes,
});

export default router;

src/router/index.ts

Använda route params i komponenten


<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  computed: {
    userId() {
      return this.$route.params.userId;
    }
  }
};
</script>

UserProfile.vue

Data fetching i Vue

<template>
  <h1>Movies</h1>
  <ul>
    <li v-for="movie in movies" :key="movie.id">{{ movie.title }} </li>
  </ul>
</template>

<script>
export default {
  name: 'MovieList',
  data() {
    return {
      movies: []
    }
  },
  methods: {
    async fetchMovies() {
      try {
        const response = await fetch('http://localhost:3000/movies')
        const data = await response.json()
        this.movies = data
      } catch (error) {
        console.error(error)
      }
    }
  },
  mounted() {
    console.log('MovieList mounted')
  },
  created() {
    console.log('MovieList created')
    this.fetchMovies()
  }
}
</script>

<style scoped></style>

MovieList.vue

Lifecycle Hooks

Olika steg i en apps livscykel.

Fråga: När är det lämpligt att fetcha data från API?

https://vuejs.org/guide/essentials/lifecycle.html