How to set up sub-routes in vue

Vue is a popular JavaScript framework designed based on the MVVM pattern, providing a simple, flexible, and efficient way to develop web applications. The routing mechanism in Vue allows developers to easily manage multiple pages as well as the status and interaction between pages. This article will introduce how to set up subroutes in Vue to better manage and organize your web application.

1. What is Vue sub-routing?

Routing components in Vue can include one or more sub-components. Child routing means that a parent routing routing configuration can have multiple child routing configurations. In Vue's routing system, sub-routes are nestable, which means that a sub-route can have its own sub-routes, which allows for better organization and management of different pages in the application.

2. How to set up Vue sub-routing?

1. Define the parent route in Vue Router

First, you need to define the parent route in Vue Router. A parent route can contain multiple child routes. You can use the Vue Router code to define the parent route:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import ParentComp from './views/ParentComp.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/parent',
      name: 'parentComp',
      component: ParentComp
    }
  ]
})

In the above code, two routes are defined: one is the root route and the other is the parent route. The path of the parent route is "/parent".

2. Add sub-routes in the component of the parent route

Then, you need to add sub-routes in the component of the parent route. You can use Vue Router's nested routing to add sub-routes. Nested routing places the configuration of the sub-routing in the component of the parent routing. The definition of nested routing includes path, name and components, for example:

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ParentComp',
  components: {
    ChildComp1: () => import('../components/ChildComp1.vue'),
    ChildComp2: () => import('../components/ChildComp2.vue')
  },
  data () {
    return {}
  },
  children: [
    {
      path: 'childcomp1',
      name: 'childcomp1',
      component: 'ChildComp1'
    },
    {
      path: 'childcomp2',
      name: 'childcomp2',
      component: 'ChildComp2'
    }
  ]
}
</script>

<style scoped>
.parent-comp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

In the above code, a file named ParentComp is defined 's parent component and contains two child route definitions. The names of the child routing components are ChildComp1 and ChildComp2, and the paths are "/parent/childcomp1" and "/parent/childcomp2" respectively.

3. Use child components in parent components

Finally, you need to use child components in parent components so that the corresponding child routing page can be displayed in the parent component. You can use Vue Router's component to display components under the current route. You can add the component in the template of the parent component, as follows:

<template>
  <div class="parent-comp">
    <router-view></router-view>
  </div>
</template>

In this way, when accessing "/parent/childcomp1" and "/parent/childcomp2" in the browser, they will be displayed separately. Shows the ChildComp1 and ChildComp2 components.

3. Summary

Vue Router provides a very flexible route management method, especially for the processing of sub-routes. By rationally using the sub-routing mechanism in Vue routing, different pages in Vue applications can be better organized and managed, and the scalability and maintainability of web applications can be enhanced.

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