Verschachteltes Routing (Sub-Routing) von Vue.js

Dieses Mal bringe ich Ihnen das verschachtelte Routing (Unterroute) von Vue.js. Was sind die Vorsichtsmaßnahmen bei der Verwendung des verschachtelten Routings (Unterroute) von Vue.js? ? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Kinder
Verschachteltes Routing, das untergeordnete Routing wird in den Apfel der übergeordneten Komponente eingefügt

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple',      component: Apple,      // 嵌套路由,子路由插入到了父组件apple中
      children: [
        {          path: 'red',          component: RedApple
        }
      ]
    },
    {      path: '/banana',      component: Banana
    }
  ]
})

Fügen Sie in der Apple-Komponente des übergeordneten Routings die RedApple-Komponente ein

<template>  <div class="hello">
    .......    <router-view></router-view>
  </div></template>

to red apple
<router-link :to="{path:&#39;apple/red&#39;}">to red apple</router-link>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Vue-Tag-Attribute und bedingtes Rendering von Vue.js

Worauf sollten Sie wann achten? mit Vue.js Matter

Das obige ist der detaillierte Inhalt vonVerschachteltes Routing (Sub-Routing) von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!