라우팅 기본

동적 세그먼트 ( 라우트 파라미터 )  

각각의 사용자에 대해 같은 레이아웃 but 다른 사용자 ID 로 랜더링 되어야 하는 User컴포넌트

다음은 모두 user컴포넌트에 매핑 됩니다.

그리고 :id 는 컴포넌트에서 this.$route.params 로 가져올 수 있습니다.

const router = new VueRouter({

  routes:[

      { path ; ' /user/:id' , component: User }

  ]

)}

tip)  세그먼트만 다른 같은 컴포넌트를 재호출 할 경우, 새로그리는 것 보다 기존것을 수정하는 것이 더 빠르다. 그러므로 다음 두가지중 한가지를 사용하자.

const User = {
  template: '...',
  ##########################################
  watch: {
    '$route' (to, from) {
      // 경로 변경에 반응하여...
    }
  }
  ##########################################
}

  
  
  const User = {
  template: '...',
  ##########################################
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
  ##########################################
}

 

 

 

router 를 프로그래밍으로 조작하기

router.push( )        //   이것은 <router-link : to = > 와 같다.

// 리터럴 string
router.push('home')

// object
router.push({ path: 'home' })

// 이름을 가지는 라우트
router.push({ name: 'user', params: { userId: 123 }})

// 쿼리와 함께 사용, 결과는 /register?plan=private 입니다.
router.push({ path: 'register', query: { plan: 'private' }})

router.replace(...)       // 히스토리 항목에 추가하지 않고  탐색한다.

window . history . go(n) 기능

앞으로 가기

router.go(1)

뒤로가기

router.go(-1)

 

 

 

라우터도 이름을 가질 수 있다.

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',      //이렇게 이름을 지정해놓으면 
      component: User
    }
  ]
})


아래처럼 경로가 아닌 이름으로 이동 할 수 있다.
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> //
  또는
router.push({ name: 'user', params: { userId: 123 }})