How to configure vue sub-routing

Vue is a popular JavaScript framework for building interactive web applications. Vue's routing function allows us to create a single page application (SPA). Different routes correspond to different components, and then the specified content is rendered in the component. Subroutes are a special type of routing in Vue routing that can be nested within other routes. This article will introduce how to configure subroutes in Vue.

First, we need to ensure that Vue and its related dependencies have been installed. It is best to create a new project using the Vue CLI. Next, we need to create the Vue component and define the routes.

Define the parent route
Define the route in the parent component (usually the root route/) to provide a container for the child component.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Define sub-route
Then, create a route pointing to the sub-component in the parent component.

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

In this example, "/" is the root route, which points to the Home component. We created a sub-route for the Home component as "/about", which points to the About component.

Add a child component container in the parent component template
In the template of the Home component, we need to add a placeholder container to render the child component.

<template>
  <div>
    <h1 id="Home">Home</h1>
    <router-view></router-view>
  </div>
</template>

This "router-view" directive is the subcomponent container, which will display the components specified through the subroute.

Add content in the child component template
In the template of the About component, we can add some content to show what it is.

<template>
  <div>
    <h1 id="About">About</h1>
    <p>This is an about page.</p>
  </div>
</template>

Now, we have successfully configured a Vue sub-router. Test it to see if it displays properly.

Summary
There are three basic steps to configure Vue subrouting. These steps include:

Define the parent route: Declare the parent component in the root route, and navigate its route to this component.

Define sub-route: Create a routing pointer for the sub-component in the parent component.

Add a child component container in the parent component template: insert the child component into the placeholder element.

Add content in the subcomponent template: Provide content for the subcomponent to demonstrate its functionality.

Finally, as a reminder, when you use subroutes in Vue, you must keep the path correct. The path must start from the parent component, starting with a slash (/).

The above is the detailed content of How to configure vue sub-routing. For more information, please follow other related articles on the PHP Chinese website!