라우트에서 데이터 전달

라우트 컴포넌트에 속성 전달

• 컴포넌트에서 $route를 사용하면 컴포넌트가 URL에 의존적이게 되어 재사용성이 떨어집니다.

• 이 의존성을 제거하기 위해서 props 옵션을 사용합니다.

  의존성 추가

  const User = {
    template: '<div>User {{ $route.params.id }}</div>'
  }
  const router = new VueRouter({
    routes: [
      { path: '/user/:id', component: User }
    ]
  })

  의존성 제거

  const User = {
    props: ['id'],
    template: '<div>User {{ id }}</div>'
  }
  const router = new VueRouter({
    routes: [
      { path: '/user/:id', component: User, props: true },
    ]
  })

• URL에 대한 의존성이 제거되기 때문에 코드 재사용이나 테스트가 쉽습니다.

• 이름을 가지는 뷰를 사용할 때는 각각의 뷰에 props 옵션을 설정해주어야 합니다.

    const router = new VueRouter({
      routes: [
        {
          path: '/main',
          components: {
            default: Main,
            header: Header,
            footer: Footer
          },
    		props: { default: true, header: false, 					footer: false }
        }
      ]
    })

Boolean mode

• props속성에 true를 넣으면 route.params가 컴포넌트 props로 설정됩니다.

Object mode

• props가 객체일 때 컴포넌트 props가 있는 그대로 설정됩니다.
• props가 정적일 때 유용합니다.

const router = new VueRouter({
  routes: [
    {
      path: '/main',
      components: {
        default: Main,
        header: Header,
        footer: Footer
      },
			props: {
	      footer: { backgroundColor: 'black' }
	    }
    }
  ]
})

function mode

• props를 반환하는 함수를 만들 수 있습니다. 이를 통해 전달인자를 다른 타입으로 캐스팅하고 정적인 값을 라우트 기반 값과 결합됩니다.

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ user: route.query.id }) }
  
})

• /search?id=testid 라는 URL로 접속하게 되면 SearchUser 컴포넌트 props는 {user:'testid'} 가 됩니다.
• props 를 함수로 만들 때 유의 사항 중 한가지는 route가 변경되었을 때 호출 되는 함수이기 때문에 이 함수에서 상태를 저장하면 안됩니다.
• wrapper component를 이용하면 상태가 변경될 때 응답할 수 있습니다.

추가적으로

history mode - URL 해시값 지우기

• 라우터 URL에 해시값(#)이 붙게되는데 뷰 라우터의 mode속성에 'history'를 주면 #이 없어지게 됩니다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

데이터 가져오기

• 보통 created()에서 데이터를 가져옵니다.
• 라우터 링크를 통해 경로가 변경되는 경우 /post/:id 경로에 매칭되는 컴포넌트는 화면이 리프래시 될 경우에만 created() 훅이 동작합니다.
• 단순히 :id 값만 변경되는 라우팅일 경우 Post 컴포넌트는 교체되지 않습니다.
• this.$route를 watch를 통해 감시하면 라우팅이 동작할때마다 데이터를 가져올수 있고 화면도 변경할 수 있습니다.

    watch: {
      // 라우터 객체를 감시하고 있다가 함수를 호출합니다.
      '$route': 'function 이름'
    },

404 Not Found 라우팅

{ 
	// will match everything 
	path: '*' 
} 
{ // will match anything starting with `/user-` 
	path: '/user-*' 
}

• /icelatte는 * 에 매칭됩니다.
• /user-admin은 user-* 에 매칭됩니다.

Vue router를 이용할 때 새로고침하면 화면이 안뜨는 이유

Vue 라우터의 모드를 'history'모드로 할 경우 js파일에 정의한 Vue Routing의 path로 클라이언트를 통제합니다.
하지만, 이것은 실제로 하나의 페이지이고 나머지는 가상일 뿐입니다. 따라서 라우팅 된 컴포넌트들이 서버에 실제로 그 주소에 존재하는 것은 아니기 때문에 새로고침을 할 경우 HTTP통신에서 응답을 받지 못하므로 '404 Not Found'가 뜨는 것입니다.

해결법은?

1. Hash 라우터 모드를 사용합니다.
   • 하지만 구글이 아닌 검색엔진에서는 SEO에 불리하여 주로 사용하는 방법은 아닙니다.
2. 서버쪽에 추가 세팅을 합니다.
   • 해당 주소값에 해당하는 html/css/js 문서가 있다는 것을 세팅해야 합니다.