집 >웹 프론트엔드 >View.js >Vue.js에서 중첩 라우팅을 사용하는 방법 소개

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

青灯夜游앞으로: 2020-12-01 17:26:433651검색

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 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 属性很有用！现在我们可以开始创建路由了。

输入 Vue 路由

在 /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: &#39;AboutPage&#39;,
  }
</script>

<style scoped>
  
</style>

现在我们的 main.js 文件需要 /about 路由。它看起来像这样。

import VueRouter from &#39;vue-router&#39;;
import Vue from &#39;vue&#39;;
import App from &#39;./App.vue&#39;;

Vue.config.productionTip = false;

import VueRouter from &#39;vue-router&#39;;
Vue.use(VueRouter);

import AboutPage from &#39;./components/AboutPage.vue&#39;;

const routes = [
  { path: &#39;/about&#39;, component: AboutPage },
]

const router = new VueRouter({
  routes
})

new Vue({
  render: h => h(App),
  router
}).$mount(&#39;#app&#39;);

最后，让我们回到 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: &#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: &#39;/travel&#39;, component: TravelPage,
    children: [
      { path: &#39;/travel/america&#39;, component: TravelAmericaPage },
      { path: &#39;/travel/china&#39;, component: TravelChinaPage}
    ]
  },
  {
    path: &#39;/about&#39;, 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: &#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를 975b587bf85a482ea10b0a28848e78a4 태그로 변경하세요. 그리드 위치 지정 클래스 속성을 변경하지 않고 유지하세요.
이제 "정보" 페이지에서 라우팅이 처리되는 완전한 기능을 갖춘 사이트 뼈대가 생겼습니다.

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

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

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Vue 믹스인이 무엇인가요?다음 기사：Vue 믹스인이 무엇인가요?

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

Vue CLI로 설정

基本代码

输入 Vue 路由

配置嵌套路由

总结

기본 코드

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

중첩 라우팅 구성

관련 기사

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