router

< router-link >

a 태그로 전환 되고, to="${path}" 로 main.js 에서 설정한 라우트 경로를 적어주면 됩니다.

...
</div>
    <router-link :to="{ name: 'membercreate' }"  class="btn btn-primary">다음</router-link>
  </div>
</template>

< router-view >

현재 url을 보고 path 매핑된 컴포넌트를 렌더링 합니다.

// app.vue
<template>
  <div id="app">
    <div class="auth-wrapper">
      <div class="auth-inner">
        <router-view />
      </div>
    </div>
  </div>
</template>

---

동적 라우트 매칭

const routes = [
    { path: '/product/:productNo', component: Product}
]

위와 같이 라우터 경로로 :productNo 로 지정하면 URL이 /product/P0001, /product/P0002 와 같이 들어올 경우 Vue 라우터는 “P0001”, “P0002”를 productNo에 매칭 시킵니다.
Product 컴포넌트 안에서 $this.$route.params.productNo 로 매칭된 값을 받아오게 됩니다.

// App.vue
<template>
  <div>
    <ul>
      <li v-for="(productNo, index) in products" :key="productNo">
        <router-link :to="`/product/${productNo}`">상품  {{ index + 1 }}  </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
      name: 'App',
      data() {
          return { products: [ 'P0001', 'P0002', 'P0003' ] } // 상품번호 배열
      }
  }
</script>

// route/Product.vue
<template>
  <div>
    <h1> ProductNo:   {{ this.$route.params.productNo }}  </h1>
    <button @click="goHome()">메인으로</button>
  </div>
</template>
<script>
  export default {
      name : 'Product',
      methods : {
          goHome() {
              this.$router.push('/')
          }
      }
  }
</script>

this.$router

this.$router.push

$router.push
template 내에서 를 통해 페이지 이동을 하면 이는 내부에서 $router.push 를 호출하는 것입니다. push 메소드를 사용하면 히스토리 스택에 추가 됩니다. 아래와 같은 순서로 페이지를 push 하면 스택에 home > product ('P0001') > product ('P0002') 순으로 쌓이게 되고, 뒤로가기 버튼을 눌렀을때 순차적으로 스택에 쌓였던 전 페이지가 보이게 됩니다.

this.$router.push('home') // <router-link to="/home">홈</router-link>
this.$router.push({ name: 'product', params: {productId: 'P0001'} })
this.$router.push({ name: 'product', params: {productId: 'P0002'} })

this.$router.replace

$router.replace 는 push 와 같이 URL 이동을 시키지만 히스토리 스택을 쌓지 않습니다.
단순히 현재 페이지를 전환하는 역할을 하기 때문입니다.

this.$router.push('home')
this.$router.replace('about') // home 에서 about 으로 대체

this.$router.go

$router.go 는 인자로 넘긴 숫자만큼 히스토리 스택에서 앞, 뒤 페이지로 이동하는 메소드 입니다.
음수일 경우 이전페이지, 양수일 경우 다음 페이지를 보여줍니다. 해당 숫자의 URL 이 스택에 없으면 라우팅에 실패하게 됩니다

this.$router.go(-1) // 한 단계 뒤로
this.$router.go(2) // 두 단계 앞으로