Explication détaillée de la façon de créer des sous-routes Vue-router (routes imbriquées)

Dans le développement d'interfaces d'applications, elle est généralement composée de plusieurs couches de composants imbriqués. Mais à mesure que le nombre de pages augmente, si vous placez toutes les pages dans un tableau routes, cela semblera très compliqué et vous ne pourrez pas déterminer quelles pages sont liées. vue-router fournit la fonction de routage imbriqué, nous permettant d'organiser les pages liées ensemble. [Recommandations associées : tutoriel vidéo 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

  Objectif expérimentalDans notre projet de centre commercial, la page de gestion backend Admin implique de nombreuses pages d'opération, telles que : 🎜

  • /admin page principale li>
  • /admin/create Créer de nouvelles informations
  • /admin/edit Modifier les informations

  🎜Allons Organisez-les ensemble via un routage imbriqué. 🎜

  Créer une page d'administration

  🎜Créez Admin.vue sous src/views, et créez un répertoire d'administration pour stocker les sous-pages d'administration (pour utiliser le sous-routage de vue-router, vous devez utiliser router-view placeholder)🎜
  • 🎜Admin.vue🎜
  rrreee

  Créer une sous-page

  🎜Créer sous src/views Le répertoire admin est utilisé pour stocker les sous-pages d'administration. Create Create.vue et Edit.vue dans le répertoire admin pour implémenter /create pour créer de nouveaux produits /edit et modifier les informations sur le produit🎜
  • 🎜Create.vue🎜
  rrreee
  • 🎜Edit.vue🎜
  rrreee

  Modifier le code du routeur/index.js

  🎜Ajouter une sous-route La sous-route est écrite en ajoutant le champ enfants à la configuration de routage d'origine. 🎜rrreee🎜Remarque : Ne pas ajouter / au chemin dans les enfants. L'ajouter signifie qu'il s'agit d'une route dans le répertoire racine. 🎜
  • 🎜index.js🎜rrreee
  🎜Maintenant, le sous-routeur Vue-router (route imbriquée) est créé🎜 🎜🎜🎜🎜🎜Dans le développement d'interfaces d'application, il est généralement composé de plusieurs couches de composants imbriqués. Mais à mesure que le nombre de pages augmente, si vous placez toutes les pages dans un tableau routes, cela semblera très compliqué et vous ne pourrez pas déterminer quelles pages sont liées. vue-router fournit la fonction de routage imbriqué, nous permettant d'organiser les pages liées ensemble. 🎜

  Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!