2022-07-17(일) TIL

황인호·2022년 7월 17일
0

TIL 모음

목록 보기
102/119

Vue.js 공부

$route.params => 파라미터는 전부알려줌
현재 URL정보는 $route에 담겨있음

실제 사용 = $route.params.id

○router.js
파라미터 업그레이드 가능
소괄호 안에 정규식 입력가능
숫자만 찾아주는 정규식 문법 : \d+

적용한 코드
path : '/api/detail/:id(\d+)'

*을 입력하면 반복됨

적용한 코드
path : '/api/detail/:id*'

★vue 공식문서에 나와있음

vue-router4 참고

404페이지 만드는 방법
1. 오류문구를 보여줄 컴포넌트를 만든다
2. router.js에서 경로를 지정해준다.

적용한 코드
{
  path : '/:anything(.*)',
  components : [오류문구 보여줄 컴포넌트]
}

위의 내용과 같이 입력하면 된다.
만약에 detail/0/author , detail/0/comment
위에 내용과 같이 만들어준 경로뒤에
author,comment 와같이 추가경로를 붙이고싶을때
nested routes를 만들면된다.

방법은 children : { }안에 만들면된다.

적용코드
conts routes = [
  {
     path : '/api/detail:id',
     component : Detail,
     // children을 입력한다.
     chileren : [
	       path : '/author',
	       component: Author.vue,
                   ]
   }
]

위에 내용을 입력하면된다.
당연히 Author 컴포넌트를 만든상태에서 하면된다.
그리고 어디서 보여줄지도 정해야한다.

$router.push(이동하고 싶은 경로)

named views => 여러개 컴포넌트 보여줄 때

profile
성장중인 백엔드 개발자!!

0개의 댓글