54. <vue-news> 프로젝트 | router | router-view | router-link

---

<main.js>

import Vue from 'vue'
import App from './App.vue'
import { router }  from './routes/index.js';

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

---

routes 폴더 안 <index.js>

mode: 'history' 사용 전 

mode: 'history' 사용 후 

import Vue from 'vue'
import VueRouter from 'vue-router'
import NewsView from '../views/NewsView.vue'
import AskView from '../views/AskView.vue'
import JobsView from '../views/JobsView.vue'
import ItemView from '../views/ItemView.vue'
import UserView from '../views/UserView.vue'

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history', // # 표시 삭제
    routes: [
        {
            path: '/',
            redirect: '/news',
        },
        {
            path: '/news', // url에 대한 정보가 담기는곳, url주소
            component: NewsView, // url 주소로 갔을때 표시될 컴포넌트
        },
        {
            path: '/ask',
            component: AskView,
        },
        {
            path: '/jobs',
            component: JobsView,
        },
        {
            path: '/item',
            component: ItemView,
        },
        {
            path: '/user',
            component: UserView,
        },
    ]
});

---

<App.vue>

<router-view>

태그는 페이지의 url이 이동했을 때 그 범위내에서 뿌려주는 태그

<template>
  <div id="app">    
    <tool-bar></tool-bar>

    <router-view/>
  </div>
</template>

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

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

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

}
</style>

---

<ToolBar.vue>

<router-link to="/경로"> 

<router-link to="/news">

<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: #fff;
    background-color: #42b883;
    display: flex;
    padding: 8px;
}
.header .router-link-exact-active{
    color: #354952;
}
.header a {
    color: #fff;
}
</style>