지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Vue 라우터 동적 라우팅 및 중첩 라우팅 예제에 대한 자세한 설명

Vue 라우터 동적 라우팅 및 중첩 라우팅 예제에 대한 자세한 설명

小云云
풀어 주다： 2018-02-03 14:45:32
원래의
3285명이 탐색했습니다.

이 글에서는 주로 Vue Router 동적 라우팅과 중첩 라우팅에 대해 소개합니다. 관심이 있으시면 자세히 알아보시기 바랍니다.

먼저 동적 라우팅을 소개하겠습니다.
내 이해에 따르면 동적 라우팅은 페이지로 이동할 수 있음을 의미합니다. 예: 다음 페이지에서: 


<template> 
 <p id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </p> 
</template>
로그인 후 복사

/hello를 클릭하면 해당 모듈이 router-view에 로드됩니다. , 라우팅에 설정된 모듈입니다. 


import Vue from &#39;vue&#39; 
import Router from &#39;vue-router&#39; 
import Hello from &#39;@/components/Hello&#39; 
import Foo from &#39;@/components/Foo&#39; 
import Foo2 from &#39;@/components/Foo2&#39; 
import Foo3 from &#39;@/components/Foo3&#39; 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: &#39;/&#39;, redirect: &#39;/hello&#39;}, 
  { 
   path: &#39;/hello&#39;, 
   component: Hello, 
   children: [ 
    {path: &#39;/hello/foo&#39;, component: Foo}, 
    {path: &#39;/hello/foo2&#39;, component: Foo2}, 
    {path: &#39;/hello/foo3&#39;, component: Foo3} 
   ] 
  }, 
  { 
   path: &#39;/cc&#39;, 
   name: &#39;Foo&#39;, 
   component: Foo 
  } 
 ] 
})
로그인 후 복사
로그인 후 복사

즉, Hello와 Foo의 두 구성 요소로 점프합니다.

그래서 중첩 라우팅이 무슨 뜻인가요? 처음에는 이런 줄 알았습니다. /hello/foo 및 /hello/foo2 두 경로는 중첩 라우팅으로 축약될 수 있지만 실제로는 그렇지 않습니다. 중첩된 라우팅은 하위 구성요소 내에 구성요소만 다시 중첩합니다. 그런 다음 라우팅을 사용하여 점프하면 점프할 때 하위 구성 요소만 변경되고 외부 상위 구성 요소는 변경되지 않도록 합니다.

아래에 전체 예제를 게시할 예정입니다.

App.vue


<template> 
 <p id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </p> 
</template> 
 
<script> 
export default { 
 name: &#39;app&#39; 
} 
</script>
로그인 후 복사

Foo.vue


<template> 
 <p> 
  <h1>3434234343</h1> 
 </p> 
</template> 
 
<script> 
 export default { 
  name: &#39;Foo&#39;, 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>
로그인 후 복사

Foo2.vue


<template> 
 <p> 
  <h1>this is Foo2</h1> 
 </p> 
</template> 
 
<script> 
 export default { 
  name: &#39;Foo2&#39;, 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>
로그인 후 복사

Foo3.v 에 


<template> 
 <p> 
  <h1>this is foo3</h1> 
 </p> 
</template> 
 
<script> 
 export default { 
  name: &#39;Foo3&#39;, 
  data () { 
   return { 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>
로그인 후 복사

Hello.vue


<template> 
 <p class="hello"> 
  <h1>{{ msg }}</h1> 
  <h2>Essential Links</h2> 
  <ul> 
   <li><a href="https://vuejs.org" rel="external nofollow" target="_blank">Core Docs</a></li> 
   <li><a href="https://forum.vuejs.org" rel="external nofollow" target="_blank">Forum</a></li> 
   <li><a href="https://gitter.im/vuejs/vue" rel="external nofollow" target="_blank">Gitter Chat</a></li> 
   <li><a href="https://twitter.com/vuejs" rel="external nofollow" target="_blank">Twitter</a></li> 
   <br> 
   <li><a href="http://vuejs-templates.github.io/webpack/" rel="external nofollow" target="_blank">Docs for This Template</a></li> 
  </ul> 
  <h2>Ecosystem</h2> 
  <ul> 
   <li><a href="http://router.vuejs.org/" rel="external nofollow" target="_blank">vue-router</a></li> 
   <li><a href="http://vuex.vuejs.org/" rel="external nofollow" target="_blank">vuex</a></li> 
   <li><a href="http://vue-loader.vuejs.org/" rel="external nofollow" target="_blank">vue-loader</a></li> 
   <li><a href="https://github.com/vuejs/awesome-vue" rel="external nofollow" target="_blank">awesome-vue</a></li> 
  </ul> 
  <p> 
   <router-link to="/hello/foo">/hello/foo</router-link> 
   <router-link to="/hello/foo2">/hello/foo2</router-link> 
   <router-link to="/hello/foo3">/hello/foo3</router-link> 
  </p> 
  <router-view style="border: solid 1px blue"></router-view> 
 </p> 
</template> 
<script> 
 export default { 
  name: &#39;hello&#39;, 
  data () { 
   return { 
    msg: &#39;Welcome to Your Vue.js App&#39; 
   } 
  } 
 } 
</script> 
 
<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
 h1, h2 { 
  font-weight: normal; 
 } 
 
 ul { 
  list-style-type: none; 
  padding: 0; 
 } 
 
 li { 
  display: inline-block; 
  margin: 0 10px; 
 } 
 
 a { 
  color: #42b983; 
 } 
</style>
로그인 후 복사

라우팅: 


import Vue from &#39;vue&#39; 
import Router from &#39;vue-router&#39; 
import Hello from &#39;@/components/Hello&#39; 
import Foo from &#39;@/components/Foo&#39; 
import Foo2 from &#39;@/components/Foo2&#39; 
import Foo3 from &#39;@/components/Foo3&#39; 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: &#39;/&#39;, redirect: &#39;/hello&#39;}, 
  { 
   path: &#39;/hello&#39;, 
   component: Hello, 
   children: [ 
    {path: &#39;/hello/foo&#39;, component: Foo}, 
    {path: &#39;/hello/foo2&#39;, component: Foo2}, 
    {path: &#39;/hello/foo3&#39;, component: Foo3} 
   ] 
  }, 
  { 
   path: &#39;/cc&#39;, 
   name: &#39;Foo&#39;, 
   component: Foo 
  } 
 ] 
})
로그인 후 복사
로그인 후 복사

App.vue와 Hello.vue 둘 다 를 포함하고 있다는 점에 유의하세요. App.vue는 그룹 외부의 라우팅을 참조하는 최상위 라우팅입니다. Hello.vue는 하위 구성 요소 표시를 담당하는 중첩 라우팅입니다.
페이지 스크린샷을 찍었습니다:

이 인터페이스에서 상단의 / 또는 /hello 또는 /cc를 클릭하면 빨간색 경로의 내용이 변경됩니다. /hello/foo /hello/foo2 /hello/foo3을 클릭하면 아래 파란색 경로의 내용이 변경됩니다.

이것은 우리의 일일 응용 프로그램과 매우 유사합니다. 가장 바깥쪽 레이어에 변경 사항이 있거나 로컬 변경 사항이 있지만 우리는 전역 변경 사항이 발생하는 것을 원하지 않습니다.

동시에 이는 각 모듈이 다른 모듈에 있는 모듈성을 준수합니다.

관련 권장 사항:

nginx_lua 사례 분석: 동적 라우팅 구현

위 내용은 Vue 라우터 동적 라우팅 및 중첩 라우팅 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
router 동적 중첩됨
원천：php.cn
이전 기사：Express 사이트에서 ejs 템플릿 엔진 사용 예제에 대한 자세한 설명 다음 기사：vue-router는 권한 제어 방법을 구현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
React Router 중첩 라우팅 및 검색 매개변수 사용 중첩된 React 경로에서 검색 매개변수를 사용할 때 /app에 있을 때 /app/user로 이동하는 링크를 클릭한 후 탐색이 작동하지 않습니다. 중첩하지 않고 ...
에서 2024-04-05 13:48:33
0
1
1475
라우팅 경로가 React.js 구성 요소를 렌더링하지 않습니다. 프레이머 모션을 사용하여 일부 애니메이션 경로 경로를 만들려고 하는데 구성요소가 표시되지 않고 RouteWithAnimation.js에서 Home, Contact...
에서 2024-04-04 10:37:17
0
1
429
authts/react-oidc-context 라이브러리 및 keycloak 인증 서버를 사용하여 로그아웃하는 방법 이것은 다음 라이브러리 버전 "oidc-client-ts":"^2.2.4","react-를 사용하여 React-rou...
에서 2024-03-31 19:13:55
0
1
544
vue-router를 사용하여 API의 테이블 데이터 하이퍼링크 API(https://restcountries.com/)에서 데이터를 가져와 표시하고 있지만 라우터 링크 태그를 사용하여 각 테이블 항목을 자체 페이지에 하이퍼링...
에서 2024-03-30 14:06:41
0
1
417
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿