Enrutamiento anidado de vue-router

---

I. Introducción

El enrutamiento anidado es una característica muy común

• Por ejemplo, en la página de inicio, queremos acceder a algunos contenidos a través de / home / news y / home / message.
• Una ruta asigna un componente y, al acceder a estas dos rutas, también se mostrarán dos componentes por separado.
  

---

En segundo lugar, siga los pasos

Hay dos pasos para implementar el enrutamiento anidado:

• Cree los subcomponentes correspondientes y configure las subrutas correspondientes en el mapa de ruta.
• Los componentes internos utilizan <router-view>etiquetas

1. Cree componentes correspondientes a dos subrutas

2, para renderizar la salida de ensamblaje anidado, VueRouter requería parámetros en childrenla configuración

La configuración secundaria es una matriz al igual que la configuración de rutas, por lo que también puede anidar varias capas de rutas.

Nota: para /anidar al principio de la ruta se utilizará como ruta raíz, el subenrutamiento sin ningún aumento /. Al generar una ruta, la ruta en la ruta principal se agregará automáticamente antes de la subruta, por lo que la ruta en la subruta no necesita volver a declarar la ruta en la ruta principal.

//配置路由的信息
import Vue from 'vue'
import Router from 'vue-router'

//路由懒加载
const Home = () => import('../components/Home')
const HomeMessage = () => import('../components/HomeMessage')
const HomeNews = () => import('../components/HomeNews')

Vue.use(Router)

const routes = [
  {
    
    
    path:'',
    redirect:'/home'
  },
  {
    
    
    path: '/home',
    component: Home,
    children:[
      {
    
    
        path:'news', //嵌套路由的时候，路径前边不能加 /
        component:HomeNews
      },
      {
    
    
        path:'message',
        component: HomeMessage
      }
    ]
  }
]

const router = new Router({
    
    
  routes
});

export default router

3. Uso en el componente de inicio

//Home.vue文件
<template>
  <div>
    <h2 class="title">我是首页Home</h2>
    //注意这里的路径必须是完整的
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    
    
    name: "Home"
  }
</script>

<style scoped>

</style>

En este punto, según la configuración anterior, cuando visite / home, la vista del enrutador no mostrará nada, porque no hay una subruta coincidente. Si desea renderizar algo, puede proporcionar una subruta vacía

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/home', 
      component: Home,
      children: [
        // 当 /home 匹配成功，
        // HomeNews会被渲染在 Home的 <router-view> 中
        // { path:'', redirect:'news'},使用重定向
        {
    
     path: '', component: HomeNews},

        // ...其他子路由
      ]
    }
  ]
})

---

3. Información

Enrutamiento anidado | sitio web oficial de Vue Router