vue Router정리

eg


Vue Router 개념

  • vue의 router는 기본적으로 javascript의 window.history (history API)를 기반으로 하고 있다

  • path는 필수항목이다 name은 선택항목이다

  • 아래와 같이 설정후 <route-link>혹은 route.push로 이동시

    <router-view>에 component가 렌더링된다

  • 아래와 같이 app에 router객체를 등록한 경우 아래의 객체가 사용가능하다

    this.$router // 페이지 이동에 필요한 router객체를 사용가능함 (this.$router.push등..)

    this.$route // 현재페이지의 정보를 가진 객체 (this.$route.params.id등..)

    const router = useRouter() // 컴포지션api

    const route = useRoute() // 컴포지션api

라우터 등록

const User = { template: '<div>foo</div>' }

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',  // 1.이름을 가지는 라우트
      component: User,
      children: [  // 2.중첩된 라우트 (즉,자식페이지)
        {
          path: 'profile',
          component: UserProfile // /user/:id/profile 과 일치시 UserProfile이 User의 <router-view> 내에 렌더링된다
          meta: { requiresAuth: true } // 5. 메타 필드, 라우트의 네비게이션가드 (beforeEach)등에서 확인및 사용 가능하다
        },
      ]
    },
    {
      path: '/test',
      components: {
        default: Component2, // 3.이름을 가지는 뷰
        a: Component2,
      }
      // 위의 경우 아래에 렌더링된다
      // <router-view ></router-view>
      // <router-view name="a"></router-view>
    },
    { 
      path: '/a',
      redirect: '/b',  // 4. redirect시 /b라는 path혹은 지정된 이름의 라우트로 이동가능하다
      //redirect: { name: 'foo' }
    }
  ]
})

const app = new Vue({
  router
}).$mount('#app')


라우터 사용예제

  • path와 name 둘중에 하나를 사용하면 된다

  • params는 name과 함께 쓰인다

  • params를 path와 함께 사용할 경우 url에 직접 입력한다

  • 아래의 예제는 모두 아래의 url을 사용한다

    /user/123?plan=private


1.선언적방식

<router-link :to="{ name: 'user', params: { userId: 123 }, query: { plan: 'private' }}">name사용</router-link>
<router-link :to="{ path: `/user/${userId}`, query: { plan: 'private' } }">path사용</router-link>
<router-link :to="/redirect" replace>


2.프로그래밍방식

router.push({ name: 'user', params: { userId: 123 }, query: { plan: 'private' }})
router.push({ path: `/user/${userId}`, query: { plan: 'private' }})
router.push({ path: '/redirect', replace: true })
router.replace({ path: '/redirect' })


router의 함수와 javascript의 historyAPI 비교 및 설명

  1. router.push() === window.history.pushState()

    히스토리를 쌓으면서 다음페이지로 이동 ( 뒤로가기 가능)

  2. router.replace() === window.history.replaceState()

    과거 히스토리를 지우고 다음페이지로 이동 (뒤로가기 불가능)

  3. router.go() === window.history.go()

    히스토리 기준으로 현재페이지에서 앞이나 뒤로 이동


페이지 이동간에 객체 전달하기 (state이용)

보내는법

router.push({
  name: 'pate',
  state: {
    dataObj : { a:1, b:'string' },
  },
});

받는법

const { dataObj } = history.state



참고

vue route3공식문서

vue route4공식문서:컴포지션api대응

페이지 이동간에 객체 전달(state이용)

historyAPI

May 20, 2024 Views 213