hands on vue3 - npm으로 router 설치하기

 

[목표]

npm을 이용해 router에 대한 라이브러리를 설치하자

 

터미널에 다음 명령어를 입력한다.

npm install --save vue-router

---

[main.js]

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';

import TeamList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';

const router = createRouter({
	history:createWebHistory(), //how to manage routing history, what the last page was
	routes: [
		{path: '/teams', component: TeamList}, //our-domain.com/teams => ... 
		{path: '/users', component: UsersList}, 
	], 									
});

const app = createApp(App)
app.use(router);
app.mount('#app');

 

[App.vue]

<template>
  <the-navigation @set-page="setActivePage"></the-navigation>
  <main>
    <router-view></router-view>
  </main>
</template>

<script>
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';
import TheNavigation from './components/nav/TheNavigation.vue';

export default {
  components: {
    TheNavigation,
    TeamsList,
    UsersList,
  },
  data() {
    return {
      activePage: 'teams-list',
      teams: [
        { id: 't1', name: 'Frontend Engineers', members: ['u1', 'u2'] },
        { id: 't2', name: 'Backend Engineers', members: ['u1', 'u2', 'u3'] },
        { id: 't3', name: 'Client Consulting', members: ['u4', 'u5'] },
      ],
      users: [
        { id: 'u1', fullName: 'Max Schwarz', role: 'Engineer' },
        { id: 'u2', fullName: 'Praveen Kumar', role: 'Engineer' },
        { id: 'u3', fullName: 'Julie Jones', role: 'Engineer' },
        { id: 'u4', fullName: 'Alex Blackfield', role: 'Consultant' },
        { id: 'u5', fullName: 'Marie Smith', role: 'Consultant' },
      ],
    };
  },
  provide() {
    return {
      teams: this.teams,
      users: this.users,
    };
  },
  methods: {
    setActivePage(page) {
      this.activePage = page;
    },
  },
};
</script>

<style>
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}
</style>

 

routing 설정만 하였기 때문에

직접 URL을 쳐서 들어가야 한다.

 

웹어플리케이션은 그렇게 동작하면 안된다.

 

다음 포스팅에서 사용자가 라우팅을 자연스럽게 할 수 있도록 기능을 구현해보자.

 

 

 

 

/teams 직접 URL입력해서 들어간 모습