Vue.js SPA(단일 페이지 애플리케이션)가 상당히 복잡해지면 Vue 라우터와 중첩 경로가 필요하기 시작합니다. 중첩 라우팅을 사용하면 더 복잡한 사용자 인터페이스와 구성 요소가 서로 중첩될 수 있습니다. Vue Router에서 중첩 라우팅의 유용성을 보여주기 위해 비교적 간단한 사용 사례를 만들어 보겠습니다.
아직 설치하지 않은 경우 다음 명령을 실행하여 Vue CLI를 전역적으로 설치하세요.
$ npm install -g @vue/cli
또는
$ yarn global add @vue/cli
이제 다음에서 vue
명령을 실행할 수 있습니다. 명령줄. alligator-nest라는 Vue 앱을 만들어 보겠습니다. vue
命令了。让我们创建一个名为 alligator-nest 的 Vue 应用:
$ vue create alligator-nest
在提示符下选择默认预设(按 Enter 键)。之后,运行以下命令:
$ npm install vue-router
然后,在你选择的编辑器中打开 alligator-nest
目录。
以下 CSS 将帮助我们为 UI 定位元素。将其作为样式表文件添加到 public/
文件夹中,并在 public/index.html
中引用它。为此,我们将使用 CSS grid:
grid.css
.row1 { grid-row-start: 1; grid-row-end: 2; } .row12 { grid-row-start: 1; grid-row-end: 3; } .row123 { grid-row-start: 1; grid-row-end: 4; } .row2 { grid-row-start: 2; grid-row-end: 3; } .row23 { grid-row-start: 2; grid-row-end: 4; } .row3 { grid-row-start: 3; grid-row-end: 4; } .col1 { grid-column-start: 1; grid-column-end: 2; } .col12 { grid-column-start: 1; grid-column-end: 3; } .col123 { grid-column-start: 1; grid-column-end: 4; } .col1234 { grid-column-start: 1; grid-column-end: 5; } .col2 { grid-column-start: 2; grid-column-end: 3; } .col23 { grid-column-start: 2; grid-column-end: 4; } .col234 { grid-column-start: 2; grid-column-end: 5; } .col3 { grid-column-start: 3; grid-column-end: 4; } .col34 { grid-column-start: 3; grid-column-end: 5; } .col4 { grid-column-start: 4; grid-column-end: 5; }
接下来,让我们对 vue-cli
添加的默认文件进行一些更改。
从 src/components
文件夹中删除 HelloWorld.vue
,并从 src/App.vue
中删除所有与其相关的东西。对 App.vue
中的 HTML 标记和 CSS 样式进行以下修改。
<template> <div id="app"> <h1 class="row1 col12">Alligator Nest</h1> <a class="row1 col3">Travels</a> <a class="row1 col4">About</a> <div class="row2 col234"></div> </div> </template> html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; padding: 2%; height: 100%; display: grid; grid-template-rows: 20% 80%; grid-template-columns: 25% 25% 25% 25%; }
如果你在项目的根目录中运行 npm run serve
,则可以将鼠标悬停在浏览器中的 localhost:8080
上,并查看框架布局。那些 display:grid
属性很有用!现在我们可以开始创建路由了。
在 /components
文件夹中创建一个名为 AboutPage.vue
的组件。它看起来像这样:
<template> <div> <h2>About</h2> <p>Alligators were around during the time of the dinosaurs.</p> </div> </template> <script> export default { name: 'AboutPage', } </script> <style scoped> </style>
现在我们的 main.js
文件需要 /about
路由。它看起来像这样。
import VueRouter from 'vue-router'; import Vue from 'vue'; import App from './App.vue'; Vue.config.productionTip = false; import VueRouter from 'vue-router'; Vue.use(VueRouter); import AboutPage from './components/AboutPage.vue'; const routes = [ { path: '/about', component: AboutPage }, ] const router = new VueRouter({ routes }) new Vue({ render: h => h(App), router }).$mount('#app');
最后,让我们回到 App.vue
,并将 “About” 的锚标记更改为属性为 to="/about"
的 b988a8fd72e5e0e42afffd18f951b277
标签。然后,将第二个 div
更改为 975b587bf85a482ea10b0a28848e78a4
标签。确保保持网格定位类属性不变。
现在,我们有了一个功能齐全的站点框架,并为 “About” 页面处理了路由。
我们在此重点介绍路由功能,因此不会在样式上话费太多时间。尽管如此,我们也要让Travels
页面看起来更精致一些。
首先,创建一个 TravelPage
,方法与创建 AboutPage
相同。在 main.js
中引用它。
还需要创建以下两个组件,这些组件最终将嵌套在 TravelPage.vue
中:
TravelAmericaPage.vue
<template> <div> <p>Alligators can be found in the American states of Louisiana and Florida.</p> </div> </template> <script> export default { name: 'TravelAmericaPage' } </script> <style scoped> </style>
TravelChinaPage.vue
<template> <div> <p>Alligators can be found in China's Yangtze River Valley.</p> </div> </template> <script> export default { name: 'TravelChinaPage' } </script> <style scoped> </style>
现在,让我们同时更新 main.js
和 TravelPage.vue
,以使用 children
来引用这些嵌套路由。必须将 main.js
更新为对 routes
常量具有以下定义:
const routes = [ { path: '/travel', component: TravelPage, children: [ { path: '/travel/america', component: TravelAmericaPage }, { path: '/travel/china', component: TravelChinaPage} ] }, { path: '/about', component: AboutPage } ];
请注意,子级的嵌套可以无限继续下去。
并且 TravelPage.vue
可以通过以下方式编写:
TravelPage.vue
<template> <div id="travel"> <h2 class="row1">Travels</h2> <div class="flex-container row2"> <router-link to="/travel/america">America</router-link> <router-link to="/travel/china">China</router-link> </div> <router-view class="row3"></router-view> </div> </template> <script> export default { name: 'TravelPage' } </script> <style scoped> div { text-align: center; } #travel { display: grid; grid-template-rows: 20% 40% 40%; } .flex-container { display: flex; justify-content: space-around; } </style>
检出 localhost:8080
,你将看到 Travels 页面中包含 2 个子页面!当你单击任一链接时,我们的 URL 也会相应更新。
希望本教程对你了解如何使用嵌套路由有帮助!
关于该主题的其他注意事项——我们可以使用动态段定义路由,例如 path:'/location/:id'
。然后在这些路由的视图上,可以将该 id 引用为 this.$route.params
rrreee
rrreee를 사용합니다:그런 다음 원하는 편집기에서
alligator-nest
디렉터리를 엽니다.기본 코드
다음 CSS는 UI 요소를 배치하는 데 도움이 됩니다.public/
폴더에 스타일시트 파일로 추가하고public/index.html
에서 참조하세요. 이를 위해 CSS 그리드
이제Grid.css
다음으로
rrreeevue-cli
로 추가된 기본 파일을 일부 변경해 보겠습니다. 프로젝트 루트 디렉터리에서npm run submit
을 실행하면 브라우저에서localhost:8080
위로 마우스를 가져가면 프레임 레이아웃을 볼 수 있습니다.display:grid
속성이 유용합니다! 이제 경로 생성을 시작할 수 있습니다.Vue 경로를 입력하세요.
/comComponents
폴더에AboutPage.vue
라는 구성 요소를 만듭니다. rrreee
main.js
파일에 /about
경로가 필요합니다. 이렇게 생겼습니다. rrreee마지막으로 App.vue
로 돌아가서 "About" 앵커 태그를 to="/about"
속성을 사용하여 <로 변경해 보겠습니다. -link>
태그. 그런 다음 두 번째 div
를 975b587bf85a482ea10b0a28848e78a4
태그로 변경하세요. 그리드 위치 지정 클래스 속성을 변경하지 않고 유지하세요.
이제 "정보" 페이지에서 라우팅이 처리되는 완전한 기능을 갖춘 사이트 뼈대가 생겼습니다.
여행
페이지를 좀 더 세련되게 보이도록 만들고 싶습니다. 🎜AboutPage
생성과 동일한 방법으로 TravelPage
를 생성하세요. main.js
에서 참조하세요. 🎜🎜또한 TravelPage.vue
에 중첩될 다음 두 구성 요소도 만들어야 합니다. 🎜🎜TravelAmericaPage.vue🎜rrreee🎜TravelChinaPage.vue 🎜rrreeemain.js
와 TravelPage.vue 를 사용하여 <code>하위 항목
을 사용하여 이러한 중첩 경로를 참조합니다. main.js
는 routes
상수에 대해 다음 정의를 갖도록 업데이트되어야 합니다. 🎜rrreee🎜자식 중첩은 무기한으로 계속될 수 있다는 점에 유의하세요. 🎜🎜그리고 TravelPage.vue
는 다음과 같이 작성할 수 있습니다: 🎜🎜TravelPage.vue🎜rrreee🎜localhost:8080
를 확인하면 다음이 표시됩니다. 여행 페이지에는 2개의 하위 페이지가 있습니다! 링크를 클릭하면 그에 따라 URL이 업데이트됩니다. 🎜path:'/location/:id'
와 같은 동적 세그먼트를 사용하여 경로를 정의할 수 있습니다. 그런 다음 해당 경로에 대한 보기에서 해당 ID를 this.$route.params
로 참조할 수 있습니다. 이 기능은 웹사이트와 앱에서 보다 구체적인 유형의 데이터(사용자, 이미지 등)를 표시하고 싶을 때 유용합니다. 🎜🎜🎜영어 원문 주소 : https://alligator.io/vuejs/nested-routes/🎜🎜번역 주소 : https://segmentfault.com/a/1190000021930656🎜🎜🎜🎜관련 추천 : 🎜🎜🎜🎜2020 요약 프런트 엔드 Vue 인터뷰 질문(답변 포함) 🎜🎜🎜🎜vue 튜토리얼 추천: 2020 최신 5개 vue.js 비디오 튜토리얼 선택 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 🎜프로그래밍 소개🎜! ! 🎜🎜위 내용은 Vue.js에서 중첩 라우팅을 사용하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!