Nested routing (sub-routing) of Vue.js

This time I will bring you the nested routing of Vue.js (sub-routing). What are the precautions when using Vue.js nested routing (sub-routing)? The following is a practical case, let’s take a look.

children
Nested routing, the child routing is inserted into the parent component apple

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
    }
  ]
})

In the parent routing apple component, insert the RedApple component

<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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

Vue tag attributes and conditional rendering of Vue.js

What should you pay attention to when using Vue.js matter

The above is the detailed content of Nested routing (sub-routing) of Vue.js. For more information, please follow other related articles on the PHP Chinese website!