Vue.js에서 중첩 라우팅을 사용하는 방법 소개

Vue.js SPA(단일 페이지 애플리케이션)가 상당히 복잡해지면 Vue 라우터와 중첩 경로가 필요하기 시작합니다. 중첩 라우팅을 사용하면 더 복잡한 사용자 인터페이스와 구성 요소가 서로 중첩될 수 있습니다. Vue Router에서 중첩 라우팅의 유용성을 보여주기 위해 비교적 간단한 사용 사례를 만들어 보겠습니다.

Vue CLI로 설정

아직 설치하지 않은 경우 다음 명령을 실행하여 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 id="Alligator-nbsp-Nest">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 属性很有用！现在我们可以开始创建路由了。

输入 Vue 路由

在 /components 文件夹中创建一个名为 AboutPage.vue 的组件。它看起来像这样：

<template>
  <div>
    <h2 id="About">About</h2>
    <p>Alligators were around during the time of the dinosaurs.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;AboutPage&#39;,
  }
</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" 的 <router-link></router-link> 标签。然后，将第二个 div 更改为 <router-view></router-view> 标签。确保保持网格定位类属性不变。

现在，我们有了一个功能齐全的站点框架，并为 “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: &#39;TravelAmericaPage&#39;
  }
</script>

<style scoped>
</style>

TravelChinaPage.vue

<template>
  <div>
    <p>Alligators can be found in China&#39;s Yangtze River Valley.</p>
  </div>
</template>

<script>
  export default {
    name: &#39;TravelChinaPage&#39;
  }
</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 id="Travels">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: &#39;TravelPage&#39;
  }
</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.paramsrrreee

프롬프트에서 기본 사전 설정을 선택합니다(Enter를 누르세요). 그 후 다음 명령을 실행하세요:

rrreee

그런 다음 원하는 편집기에서 alligator-nest 디렉터리를 엽니다.

기본 코드

다음 CSS는 UI 요소를 배치하는 데 도움이 됩니다. public/ 폴더에 스타일시트 파일로 추가하고 public/index.html에서 참조하세요. 이를 위해 CSS 그리드

를 사용합니다:

Grid.css
rrreee

다음으로 vue-cli로 추가된 기본 파일을 일부 변경해 보겠습니다.

src/comComponents 폴더에서 HelloWorld.vue를 삭제하고 src/App.vue에서 이와 관련된 모든 항목을 삭제하세요. App.vue의 HTML 마크업 및 CSS 스타일을 다음과 같이 변경합니다. rrreee

프로젝트 루트 디렉터리에서 npm run submit을 실행하면 브라우저에서 localhost:8080 위로 마우스를 가져가면 프레임 레이아웃을 볼 수 있습니다. display:grid 속성이 유용합니다! 이제 경로 생성을 시작할 수 있습니다.

Vue 경로를 입력하세요. /comComponents 폴더에 AboutPage.vue라는 구성 요소를 만듭니다. rrreee

이제 main.js 파일에 /about 경로가 필요합니다. 이렇게 생겼습니다.

rrreee마지막으로 App.vue로 돌아가서 "About" 앵커 태그를 to="/about" 속성을 ​​사용하여 &lt로 변경해 보겠습니다. -link> 태그. 그런 다음 두 번째 div를 <router-view></router-view> 태그로 변경하세요. 그리드 위치 지정 클래스 속성을 변경하지 않고 유지하세요.
이제 "정보" 페이지에서 라우팅이 처리되는 완전한 기능을 갖춘 사이트 뼈대가 생겼습니다.

🎜여기에서는 라우팅 기능에 중점을 두어 스타일에 너무 많은 시간을 들이지 않겠습니다. 그래도 우리는 여행 페이지를 좀 더 세련되게 보이도록 만들고 싶습니다. 🎜

---

🎜먼저 AboutPage 생성과 동일한 방법으로 TravelPage를 생성하세요. main.js에서 참조하세요. 🎜🎜또한 TravelPage.vue에 중첩될 다음 두 구성 요소도 만들어야 합니다. 🎜🎜TravelAmericaPage.vue🎜rrreee🎜TravelChinaPage.vue 🎜rrreee

중첩 라우팅 구성

🎜이제 main.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!