router

라우터는 화면을 새로 고침하지 않고 태그만 변경하여 표시하는 기능이다.

router 설치 방법

커맨트 창에서 아래 입력하여 설치

npm install vue-router

router 선언

1. src 폴더 및에 router 폴더를 만들고 router 폴더 및에 router.js를 만들고 아래와 같이 선언 한다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '@/components/Main.vue';
import About from '@/components/About.vue';
Vue.use(VueRouter)

let router = new VueRouter({
// history 모드는 자연스러운 url 가능, 지정하지 않으면 해시(#)기호로 url 사용
    mode: 'history', 
    routes: [
        {
            path: "/", // 경로
            name: "Main", // 해당 경로의 이름 
            component: Main // 이동할 컴포넌트
        },
        {
            path: "/about", // 경로
            name: "About", // 해당 경로의 이름 
            component: About // 이동할 컴포넌트
        }  
    ]
}) 
export default router;

2. main.js에 1번에서 만든 router.js import한다.

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/router.js' // router import
Vue.config.productionTip = false

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

3. 라우터를 사용할 vue 파일에서 아래 와같이 router-view 태그를 선언하면 해당 태그부분이 Main.vue , About.vue 페이지로 변경 되서 보여진다.

<template>
  <div id="app">
    <router-link to="/">home</router-link> |
    <router-link to="/about">about</router-link>
     <hr>
    <router-view></router-view>
  </div>
</template>

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

처음 페이지 집입시 redirect 하기

• redirect 프로퍼티를 사용해서 http://localhost:8080 접속시 http://localhost:8080/BlogList 접속 되도록 하는 기능

routes: [
    {      
      //처음 페이지 집입시
      path: '/',
      redirect: '/BlogList'
    },
    {
      path: '/BlogList',
      name: 'BlogList',
      component: () => import('@/components/BlogList')
    }
 ]

router 주소가 설정이 안된 주소 접속 시 보여주는 페이지 추가

• path에 *를 넣으면 라우터에 포함되지 않은 주소를 입력 할경우 해당 페이를 보여준다.
• http://localhost:8080/a 입력 시 등록되지 않은 라우터이기 때문에 NotFound 페이지를 보여준다.

routes: [
    {      
      path: '*',
      component: () => import('@/components/NotFound')
    }
 ]

router-link

1. 라우터 링크 태그를 선언 후 to속성에 router.js 선언되어있는 라우터 배열에서 해당하는 path 값을 설정 하면 해당 라우터 페이지로 이동이 가능 하다.

 <router-link to="/">home</router-link> |
 <router-link to="/about">about</router-link>

router params 및 query 및 라우터 이동

---------------------라우터를 이동 및 파라미터를 전달할 vue--------------
<template>
  <div id="app">
    <router-link to="/">home</router-link> |
    <router-link to="/about">about</router-link>
    <hr>
    <button @click='gotoHome()'>메인 페이지로 이동</button> <br>
    <button @click='gotoPath()'>push로 path: 이동</button> <br>
    <button @click='gotoName()'>push name으로 이동</button> <br>
    <button @click='gotoNameParams()'>push로 name 및 params 보내서 이동</button> <br>
    <button @click='gotoQuery()'>push로 Query 이동</button> <br>
    <button @click='nextPage()'>다음 페이지 이동</button> <br>
    <button @click='previousPage()'>이전페이지 이동</button> <br>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
     methods:{
        gotoPath(){
            this.$router.push({path:'/about'});            
        },
        gotoName(){
            this.$router.push({name:'About'});            
        },
        gotoHome(){            
            this.$router.push('/');
        },
        gotoNameParams(){            
            this.$router.push({ name: 'About', params: { userId: 444455555 }})             
        },
        gotoQuery(){
            this.$router.push({ path: '/About', query: { plan: 'private' }})
        },
        nextPage(){
            this.$router.go(1);
        },
        previousPage(){
            this.$router.go(-1);
        },       
        goto3Page(){
            this.$router.go(3);
        },       
    }
}
</script>
-------------------- 라우터 명령어를 통해 이동될 vue-----------
<template>
  <div>
      <h1>This is about page</h1>
      <p>router로 받은 파라미터 값 {{$route.params}}</p>
      <p>라우터를 통해 query로 받은 값:{{$route.query}}</p>
    </div>
</template>

<script>
export default {
    created(){
        console.log(this.$route.params);
        console.log(this.$route.query);
    }
}
</script>