Vue-router 하위 경로(중첩 경로)를 생성하는 방법에 대한 자세한 설명

애플리케이션 인터페이스 개발에서는 일반적으로 여러 계층의 중첩된 구성 요소로 구성됩니다. 그러나 페이지 수가 증가함에 따라 모든 페이지를 routes 배열에 넣으면 매우 지저분해 보이고 어떤 페이지가 관련되어 있는지 확인할 수 없게 됩니다. vue-router는 중첩 라우팅 기능을 제공하여 관련 페이지를 함께 구성할 수 있습니다. [관련 권장사항: vue.js 동영상 튜토리얼]routes 数组里面会显得很乱，你无法确定哪些页面存在关系。借助 vue-router 提供了嵌套路由的功能，让我们能把相关联的页面组织在一起。【相关推荐：vue.js视频教程】

实验目的

在我们的商城项目中，后台管理页 Admin 涉及到很多操作页面，比如：

• /admin 主页面
• /admin/create 创建新信息
• /admin/edit 编辑信息

让我们通过嵌套路由的方式将它们组织在一起。

创建Admin页面

在src/views下创建 Admin.vue，并创建admin目录，以用来存放admin的子页面（ 使用vue-router的子路由，需要在父组件利用 router-view占位 ）

• Admin.vue

<template>
  <div class="title">
    <h1>{{ msg }}</h1>
    <!-- 路由插槽 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "home",

  data() {
    return {
      msg: "This is the Admin Page",
    };
  },
};
</script>

<style scoped>
</style>

创建子页面

在src/views下创建admin目录用来存放admin的子页面，在admin目录下新建Create.vue 和 Edit.vue 来实现/create 创建新的商品/edit 编辑商品信息

• Create.vue

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Create</h1>
    </div>
  </div>
</template>

• Edit.vue

<template>
  <div>
    <div class="title">
      <h1>This is Admin/Edit</h1>
    </div>
  </div>
</template>

修改router/index.js代码

增加子路由，子路由的写法是在原有的路由配置下加入children字段。

children:[
    {path:'/',component:xxx},
    {path:'xx',component:xxx}]

注意：children里面的path 不要加 / ，加了就表示是根目录下的路由。

• index.js

  import Vue from 'vue'import VueRouter from 'vue-router'import Admin from '@/views/Admin.vue'// 导入admin子路由import Create from '@/views/admin/Create';import Edit from '@/views/admin/Edit';Vue.use(VueRouter)const routes = [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      children: [
        {
          path: 'create',
          component: Create,
        },
        {
          path: 'edit',
          component: Edit,
        }
      ]
    }]const router = new VueRouter({
    routes})export default router

  至此 Vue-router 子路由（嵌套路由）创建完成

  在应用界面开发中通常由多层嵌套的组件组合而成。但随着页面的增多，如果把所有的页面都塞到一个 routes 数组里面会显得很乱，你无法确定哪些页面存在关系。借助 vue-router

  실험 목적저희 쇼핑몰 프로젝트에서 백엔드 관리 페이지 Admin에는 다음과 같은 많은 작업 페이지가 포함됩니다. 🎜

  • /admin 메인 페이지 li>
  • /admin/create 새로운 정보 생성
  • /admin/edit 정보 편집

  🎜Let's 중첩 라우팅을 통해 함께 정리하세요. 🎜

  관리자 페이지 생성

  🎜src/views 아래에 Admin.vue를 생성하고 관리자의 하위 페이지를 저장할 관리자 디렉토리를 생성합니다(vue-router의 하위 라우팅을 사용하려면 router-view 자리 표시자)🎜
  • 🎜Admin.vue🎜
  rrreee

  하위 페이지 만들기

  🎜src/views 아래 만들기 관리자 디렉터리는 다음과 같습니다. 관리자 서브페이지를 저장하는 데 사용됩니다. 관리자 디렉토리에 Create.vue 및 Edit.vue를 생성하여 /create를 구현하여 새 제품을 /edit 생성하고 제품 정보를 편집합니다🎜
  • 🎜Create.vue🎜
  rrreee
  • 🎜Edit.vue🎜
  rrreee

  라우터/index.js 코드 수정

  🎜하위 경로 추가 하위 경로는 원래 라우팅 구성에 하위 필드를 추가하여 작성됩니다. 🎜rrreee🎜참고: 하위 경로에 /를 추가하지 마세요. 추가하면 루트 디렉터리의 경로라는 의미입니다. 🎜
  • 🎜index.js🎜rrreee
  🎜이제 Vue-router 하위 라우터(중첩 경로)가 생성되었습니다🎜 🎜🎜🎜🎜🎜애플리케이션 인터페이스 개발에서는 일반적으로 여러 계층의 중첩된 구성 요소로 구성됩니다. 그러나 페이지 수가 증가함에 따라 모든 페이지를 routes 배열에 넣으면 매우 지저분해 보이고 어떤 페이지가 관련되어 있는지 확인할 수 없게 됩니다. vue-router는 중첩 라우팅 기능을 제공하여 관련 페이지를 함께 구성할 수 있습니다. 🎜

  위 내용은 Vue-router 하위 경로(중첩 경로)를 생성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!