뷰 라우터

나는 어제 Vue 과정의 라우터 섹션을 살펴보고 마무리하는 데 약간의 시간을 보냈습니다. vue-cli의 초기 설정 중에 옵션으로 프로젝트에 추가하거나 나중에 vue add router 를 사용하여 추가할 수 있습니다. documentation은 잘 배치되어 있고 특정 측면과 라우터 사용 방법에 대한 몇 가지 좋은 예와 사용 사례가 있는 매우 훌륭합니다.

Vue School에 대한 과정도 있습니다. 404 페이지를 만들거나 내 경로의 전환을 실험합니다. 라우터를 설치한 후 main.js를 사용하여 import Router from 'vue-router'로 가져온 다음 Vue.use(Router)를 추가하고 초기화하고 경로를 추가합니다.

const router = new Router({ routes})

이 예에는 개체 배열인 routes.js 파일이 있으며 main.js import { routes } from './routes로 가져온 다음 예제 파일은 다음과 같습니다.

export const routes = [
  { path: '/', name: 'Home'},
  { path: '/page2', name: 'Page 2'}
]

그런 다음 <router-view></router-view>를 App.vue에 추가하여 Vue 인스턴스에서 보이는 것과 일치시킵니다. 기본 모드는 해시를 사용합니다. localhost:3000/#/ 이 해시 모드는 # 없이 서버에 요청을 보내므로 SPA에서 일반적입니다. 이를 변경하려면 별도의 라우터 파일이나 App.vue에 새 라우터를 추가mode: history할 수 있습니다.

import Router from "vue-router";
Vue.use(Router);

export default new Router({ mode: "history",});

라우터 링크를 사용한 탐색

<router-link></router-link>를 사용하면 암시적 eventListener를 추가하여 클릭을 수신하고 서버 요청을 보내는 페이지를 다시 로드하는 기본 동작 대신 올바른 경로를 로드할 수 있다는 이점이 있습니다. 또한 router-link 코드를 통해 탐색을 트리거할 수 있습니다.

...methods: { goHome(){ this.$router.push('/') }}...

그런 다음 이 메서드를 요소(예: 버튼)에 추가할 수 있습니다.

경로 매개변수

URL의 동적 부분을 추가하려면(예: params 속성을 사용하여 콜론을 사용하여 ID는 route.js: ... path: '/user/:id...에 키 값 쌍을 보유하는 객체이며 구성 요소에 있음):

...data(){...id: this.$route.params.id}

하위 경로

하위 경로를 추가하려면 children 속성을 추가합니다.

{ path: '/person', component: Person, 
children: [{ path: '', component: myComp }...]

명명된 경로

경로를 만들 때 이름 속성을 모든 경로에 추가할 수 있습니다(아무거나 가능).

{ path: ':id/edit', name: 'editUser' }

그런 다음 내비게이션 또는 필요할 때마다 추가할 수 있습니다. :to="{ name: 'editUser', params: { id: $route.params.id }}" 코드에 추가할 수도 있습니다. this.$router.push({ name: 'home' })

쿼리 매개변수

탐색에서 직접 설정/추가하거나 개체 구문을 사용할 수 있습니다. ..to="/?a=1000&locale=en" 또는 :to=...query: { locale: 'en' } 이를 추출하려면 params와 동일한 방식으로 수행할 수 있지만 쿼리를 사용합니다. Locale: {{ $route.query.locale }} 이름을 지정하여 여러 라우터 보기를 가질 수도 있습니다.

그런 다음 다음을 포함하도록 경로를 업데이트합니다.

...path: '', name: 'home', components: {
default: Home,
'header': Header
}

모든 경로를 잡아라

이는 와일드카드를 사용하여 설정됩니다.

{ path: *, redirect: '/' }

이렇게 하면 routes.js 파일에 포함되지 않은 모든 항목을 포착하고 사용자를 다시 홈페이지로 리디렉션합니다.

근위 연대

이름에서 알 수 있듯이 경로를 보호하는 데 사용됩니다. 먼저 beforeEnter 가드 이것은 항상 실행되므로 일반 검사를 위해 전역적으로 설정할 수 있습니다.

router.beforeEach((to, from, next) => {
next() // this needs to be included
})

이는 routes.js 설정 내의 개별 경로에서 설정할 수 있습니다.

...path: '', component: '', beforeEnter: (to, from, next) => {
next()
}...

또한 수명 주기 후크와 같은 구성 요소에서 설정할 수도 있습니다.

beforeRouteEnter(to, from, next) {
  if(true){
    next()
  } else {
    next(false)
  }
}

이 가드는 구성 요소를 렌더링하는 경로가 확인되기 전에 호출되기 때문에 이 가드에 액세스할 수 없다는 점에 유의하는 것이 중요합니다.

beforeLeave 가드는 구성 요소 수준에서 추가해야 합니다.

지연 로딩

약속을 반환하고 이를 해결해야 하는 각 구성 요소에 대해 경로에 비동기 함수를 설정할 수 있습니다. 이렇게 하면 성능이 향상됩니다.

... const User = resolve => {
   require.ensure(['./components/...'], () => {
     resolve(require('./components/...'))
  })
}

나는 여전히 이것에 대해 배우고 있으며 이것은 내가 배우는 동안 문서화하려고 시도하고 있으므로 누군가 내가 놓친 것에 대한 의견이나 듣고 싶은 제안이 있으면 듣고 싶습니다.