vue router 학습 의 동적 경로 와 내장 경로 에 대한 상세 한 설명

본문 주요 참고:https://router.vuejs.org/zh-cn/essentials/nested-routes.html
본 논문 의 읽 기 전 제 는 vue 프론트 프로그램 을 구축 하고 실행 할 수 있다 는 것 이다.만약 에 건축 이 있다 면 참고 할 수 있 는 글 이 있 습 니 다.
https://www.jb51.net/article/111650.htm
네,밑 에 상품 을 올 리 겠 습 니 다.
우선 동적 루트 를 소개 하 겠 습 니 다.
동적 경로 가 제 이해 에 따 르 면 페이지 의 점프 를 할 수 있 습 니 다.예 를 들 어 아래 의 이 페이지 에서:

<template> 
 <div 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> 
 </div> 
</template> 

/hello 를 누 르 면 router-view 에 해당 하 는 모듈,즉 경로 에 설 치 된 모듈 을 불 러 옵 니 다.

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
}) 

Hello 와 Foo 라 는 두 구성 요소 로 넘 어 가 는 것 이다.
그렇다면 포 함 된 길 은 무슨 뜻 일 까?처음에 나 는 이렇게 생각 했다./hello/foo 와/hello/foo 2 두 길 은 포 함 된 길 로 간략하게 쓸 수 있 지만 사실은 그렇지 않다.플러그 인 루트 는 하위 구성 요소 에 다시 플러그 인 구성 요소 만 있 습 니 다.그리고 루트 를 사용 하여 점프 를 합 니 다.이렇게 점프 를 할 때 변 화 된 것 은 하위 구성 요소 뿐 이 고 바깥쪽 의 부모 구성 요 소 는 변 하지 않 습 니 다.
다음은 내 가 완전한 예 를 내 놓 아 보 겠 다.
App.vue

<template> 
 <div 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> 
 </div> 
</template> 
 
<script> 
export default { 
 name: 'app' 
} 
</script> 
 
<style> 
#app { 
 font-family: 'Avenir', Helvetica, Arial, sans-serif; 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale; 
 text-align: center; 
 color: #2c3e50; 
 margin-top: 60px; 
} 
</style> 

Foo.vue

<template> 
 <div> 
  <h1>3434234343</h1> 
 </div> 
</template> 
 
<script> 
 export default { 
  name: 'Foo', 
  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> 
 <div> 
  <h1>this is Foo2</h1> 
 </div> 
</template> 
 
<script> 
 export default { 
  name: 'Foo2', 
  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.vue

<template> 
 <div> 
  <h1>this is foo3</h1> 
 </div> 
</template> 
 
<script> 
 export default { 
  name: 'Foo3', 
  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> 
 <div 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> 
  <div> 
   <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> 
  </div> 
  <router-view style="border: solid 1px blue"></router-view> 
 </div> 
</template> 
<script> 
 export default { 
  name: 'hello', 
  data () { 
   return { 
    msg: 'Welcome to Your Vue.js App' 
   } 
  } 
 } 
</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 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 
 
Vue.use(Router) 
 
export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
}) 

주의해 야 할 것 은 App.vue 와 Hello.vue 를 자세히 보 는 것 입 니 다.모두를 포함 하고 있 습 니 다.그러나 그들의 역할 은 다 릅 니 다.App.vue 는 최상 위 경로 입 니 다.그룹 외층 의 경로 입 니 다.Hello.vue 는 내장 경로 입 니 다.하위 구성 요 소 를 표시 합 니 다.
나 는 페이지 를 캡 처 했다.
 
이 화면 은 맨 위 에 있 는/또는/hello 또는/cc 를 클릭 할 때 빨간색 경로 의 내용 이 변 합 니 다./hello/foo/hello/foo 2/hello/foo 3 를 누 르 면 아래 파란색 경로 의 내용 이 변 합 니 다.
이렇게 하면 우리 가 평소에 사용 하 는 것 과 매우 비슷 하 다.가장 바깥쪽 은 변화 가 있 거나 부분 적 으로 변화 가 있 지만 전체적인 변 화 를 원 하지 않 는 다.
이 동시에 이렇게 하면 모듈 화 에 부합 되 고 각 모듈 은 각각 다른 모듈 에 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.