6. vue router - 2

• router에서 uri변수 받아오기

  • const routes = [
      {
        path: '/detail/:id',
        component: Detail,
      },
    ]

  • router.js에서 위와같이 설정을 해줘야 파라미터의 변수를 받아올 수 있으며 :(콜론)으로 시작해서 변수명을 적어주면 detail뒤에 들어온 값은 파라미터값으로 인식한다.

  • <template>
    	{{$route.params.id}}
    <template>

  • router.js에서 설정한 파라미터를 컴포넌트에서 받아오는 방법이다.
  • params까지가 문법이고 뒤에 id는 파라미터 명이다.
    • 상단 코드를 보면 파라미터 key를 id라고 해줬기 때문에 id를 써준것이다.
    • 만약 asdf라고 했으면 $route.params.asdf라고 하면 된다.
• router내에서 또 라우터 잡아주기( nested routes )
  • /detail/0/comment > 0번 게시물의 상세 내용과 댓글
  • /detail/0/author > 0번 게시물의 상세 내용과 작성자 정보
  • 위와 같이 만들어주고싶을때 사용할 수 있다.

  • const routes = [
    	{
        	path: '/detail/:id',
            component: Detail,
            children: [
            	{
                	path: 'comment',
                    component: Comment
                },
                {
                	path: 'author',
                    component: Author
                }
            ]
        }
    ]

    • children에 path값을 정해줄때는 절대 /를 넣으면 안된다.
  • 사용방법은 똑같이 Detail컴포넌트로 가서 <template>안에 <router-view>를 입력해주면 동작한다.
  • $router.push('uri') : 코드 실행시 이동
  • $router.go(숫자) : 1앞으로 한페이지 이동, -1 뒤로 한페이지 이동
  • https://next.router.vuejs.org/ 참고