How to use subroutes in Vue Router?

How to use sub-routing in Vue Router?

Vue Router is the routing manager officially provided by Vue.js, which is used to implement the routing function of the front-end page. It allows us to jump between pages in the application and supports the nested use of sub-routes. This article will introduce in detail how to use subrouting in Vue Router and demonstrate it through code examples.

In Vue Router, we can use routes configuration items to define routing rules. In the routes array, sub-routes can be declared nested. Sub-route refers to a group of sub-level routes under the parent route, used to achieve more fine-grained page jumps.

The following is a code example using child routing:

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Parent from './components/Parent.vue'
import Child from './components/Child.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

In the above code, we define two components Parent and Child, which correspond to parent routing and child routing respectively. In the routes array, we use the children configuration item to declare child routes. In this example, the path of the parent route is '/', and the path of the child route is 'child', corresponding to the Parent and Child components respectively.

In the parent component Parent, we need to add a label to render the content of the child route. This label is . After adding the tag to the template of the Parent component, the child component will be rendered to this position.

The following is a code example of the Parent component:

<!-- Parent.vue -->
<template>
  <div>
    <h2 id="父级路由">父级路由</h2>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Parent'
}
</script>

In the template of the Parent component, we can add other content, such as a title. Then render the content of the sub-route through the tag. In this way, the component corresponding to the sub-route will be displayed in the Parent component.

The following is a code example of the Child component:

<!-- Child.vue -->
<template>
  <div>
    <h3 id="子级路由">子级路由</h3>
    <p>这是子级路由的内容。</p>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

In the template of the Child component, we can customize the content of the sub-route. This is just a simple example, you can define more complex sub-routing content according to actual needs.

Finally, use the VueRouter constructor in main.js to create a routing instance and configure the previously defined routing rules to it. Then, pass in this routing instance in the Vue instance, and mount the Vue instance to the page through the $mount method.

Now, we can run the code and see the effect. When the '/' path is accessed, the content of the parent route Parent will be displayed, and the content of the child route Child will be rendered at the tag position.

To summarize, sub-routes in Vue Router can be defined through the children configuration item in the routes array. The parent route renders the content of the child route through the tag. In actual development, sub-routes can be flexibly used according to needs to achieve more complex page jumps and component nesting.

I hope this article can help you understand and use the sub-routing function in Vue Router. If you have any questions or shares, please leave them in the comment area.

The above is the detailed content of How to use subroutes in Vue Router?. For more information, please follow other related articles on the PHP Chinese website!