vue-router 매개 변수 사용 방법

vue-router 매개 변수 사용 방법

라우터로 작업하는 것은 처음입니다.다른 페이지로 이동하려면 다음 코드를 사용합니다.

this.$router.push({path: '/newLocation', params: { foo: "bar"}});

그러면 새로운 컴포넌트에 있을 것으로 예상합니다.

this.$route.params

이거 안 되네.저도 시도했습니다.

this.$router.push({path: '/newLocation'});
this.$router.push({params: { foo: "bar"}});

소스 코드를 조금 검사했는데 이 속성이 새 개체 {}(으)로 덮어쓰기되었습니다.

파라메스 용도가 생각보다 다른가요?그렇지 않다면 어떻게 사용하나요?

잘 부탁드립니다

각 경로의 컴포넌트에 매개 변수를 전달하려면 라우팅 객체의 경로 속성은 다음과 같은 동적 세그먼트를 가져야 합니다.:params 객체의 키 이름 뒤에 이어집니다.

그래서 당신의 루트는

routes: [
    {path: '/newLocation/:foo', name: 'newLocation', component: newComponent}
]

다음으로 컴포넌트를 프로그래밍 방식으로 탐색하려면 다음 작업을 수행해야 합니다.

this.$router.push({name: 'newLocation', params: { foo: "bar"}});

사용하고 있는 것을 확인합니다.name대신 경로의path부동산에 따라 패럴럼을 지나가고 있을 때params.

사용하고 싶다면path다음과 같이 해야 합니다.

this.$router.push({path: '/newLocation/bar'});

패스 어프로치에 의해 파라미터는 자동적으로 대응하는 필드에 매핑됩니다.$route.params.

자, 만약console.log(this.$route.params)새로운 컴포넌트에는 다음과 같은 오브젝트가 있습니다.{"foo": "bar"}

매개 변수 대신 쿼리 사용

this.$router.push({path: '/newpath', query : { foo: "bar"}});

컴포넌트에는

console.log(this.$route.query.foo)

제가 찾은 가장 쉬운 방법은 명명된 경로를 매개 변수 옵션과 함께 사용하는 것입니다.다음과 같은 라우터 파일이 있다고 합니다.

그리고 아이디로 영화 페이지에 접속하고 싶다.Vue의 라우터 링크컴포넌트(또는 Nuxt의 링크컴포넌트)를 사용하여 다음과 같이 접속할 수 있습니다.

Vue:

<router-link :to="{ name: 'movie', params: { id: item.id } }">{{ item.title }}</router-link>

Nuxt:

<nuxt-link :to="{ name: 'movie-id', params: { id: item.id } }">{{ item.title }}</nuxt-link>

name 파라미터는 라우터 파일 내의 원하는 루트의 "name" 속성과 일치해야 합니다.마찬가지로 파라미터 이름도 일치해야 합니다.

Nuxt는 새 페이지를 작성할 때 자동으로 루트파일을 만듭니다.Nuxt가 루트에 붙이는 이름을 확인하려면 으로 이동합니다.프로젝트에 Nuxt 폴더를 추가하여 "router.js" 파일을 찾습니다.

일반적으로 속성을 라우터에 바인드하는 것은 안티 패턴으로 간주되지 않습니까?

Vue 라우터가 실제로 사용하는 컴포넌트에 바인드하는 것이 훨씬 더 드라이 솔루션입니다.베스트 프랙티스의 상세한 것에 대하여는, https://router.vuejs.org/en/essentials/passing-props.html 를 참조해 주세요.

소품 속성의 []을(를) 받아볼 수 있습니까?그 방법은, https://vuejs.org/v2/guide/components.html#Props 를 참조해 주세요.

질문이 있으시면 팝업해주세요!기꺼이 도와드리겠습니다.

언급URL : https://stackoverflow.com/questions/45296505/how-to-use-vue-router-params