[vue] vue-router 설정하기

client에서 routing을 해주는 것은 spa를 구성할 때 필수적이라고 할 수 있겠다.
따라서 구조가 어느 정도 나왔다면 라우팅을 먼저 구성을 하고 시작하는 것이 도움이 될 것 같다.
react의 그것과 vue의 router는 완전 비슷하다.

version.
vue : 3
vue-cli : 4
vue-router : 4

---

우선 routes의 설정을 app에서 사용할 수 있게 연결해준다.

(express로 구성한 것 같이 생기게 된다.)

// main.js

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

import routes from './routes';

const app = createApp(App);

app.use(routes);

app.mount('#app');

routes를 설정해준다.

세부적인 속성은 공식문서를 참고하면 되겠다.

// routes/index.js
import { createRouter, createWebHistory } from 'vue-router';
import AskView from '../views/AskView';
import NewsView from '../views/NewsView';
import JobsView from '../views/JobsView';
import ItemView from '../views/ItemView';
import UserView from '../views/UserView';

const routes = [
  {
    path: '/',
    redirect: '/news',
  },
  {
    path: '/ask',
    component: AskView,
  },
  {
    path: '/news',
    component: NewsView,
  },
  {
    path: '/jobs',
    component: JobsView,
  },
  {
    path: '/user',
    component: UserView,
  },
  {
    path: '/item',
    component: ItemView,
  },
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

<router-view> 를 최상단 app에 끼운다.

안에는 내가 위에서 정의한 컴포넌트들이 자리하게 되고, url에 맞게 해당하는 컴포넌트가
이 위치에 들어오게 된다.

<template>
 <tool-bar/>
  <router-view/>
</template>

<script>
import ToolBar from './components/ToolBar.vue'

export default {
  components : {
    ToolBar
  }
}
</script>

<style>
body{
  padding:0;
  margin:0;
}
</style>

router-link를 끼운다. (버튼이 자리잡길 원하는 곳에)

끼우지 않아도 url을 바꿔 접근할 수 있지만, 일반적인 사용자는 그렇지 못하다.

<template>
  <div class="header">
      <router-link to="/news">News</router-link> | 
      <router-link to="/ask">Ask</router-link> |
      <router-link to="/jobs">Jobs</router-link>
  </div>
</template>

<script>


export default {

}
</script>

<style scoped> 
    .header {
        color : white;
        background: lightgreen;
        display:flex;
        padding : 8px;
    }
    .header .router-link-exact-active {
        color: #35495e
    }
    .header a {
        color : white;
    }
</style>