Vue3 #11

서론

#10에서는 라우터 설정을 했고 #11에서는 라우터 설정이 후 옵션을 부여합니다.

 

본론

props 보내기

{ path: "/", name: "Main", component: MainComponent, props: { foo: "bar" } },
<!-- name 설정시 :to="{name : 'Main'}" 가능 props 설정시 데이터 전달 가능 -->

{ path: "/list", name: "List", component: ListComponent, props: true },
<!-- <RouterLink :to="{ name: 'List', params: { test: 'test' }}">List</RouterLink> -->
<!-- props: true를 해도 어째서인지 실행되지 않습니다. -->

{ path: "/:pathmatch(.*)", name: "Not-Found", component: ErrorPage },
<!-- redirect시 접근 금지 시킴 -->
<!-- vite.config.js에 vue: "vue/dist/vue.esm-bundler.js", 설정시 컴포넌트 페이지로 이동 -->

{ path: "/post/:id", component: DetailComponent, props: true },
<!-- post/ 뒤에 어떠한 값이 들어와도 DetailComponet가 출력 -->
<!-- props.true를 하면 해당 props에 :id값이 나옴 -->

https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

 

위에 이슈때문에 안된다고 합니다.

 

const ListComponent = {
  template: '<div>사용자 {{ $route.params.id }}</div>',
}

이렇게 해도 안됩니다///

정리

간단하게 라우터 옵션을 봤습니다.

주로 사용할것으로 보이는 name, redirect=: "/", 동적 라우터 변경으로 보입니다