How is nested routing implemented in Vue Router?

How is nested routing implemented in Vue Router?

Vue.js is a popular JavaScript framework for building user interfaces. Vue Router is an official plug-in for Vue.js, used to build a routing system for single-page applications. Vue Router provides a simple and flexible way to manage navigation between different pages and components of your application.

Nested routing is a very useful feature in Vue Router, which can easily handle complex page structures. Through nested routing, we can define multiple child routes under a parent route to implement the hierarchical structure of the page. In this article, we will learn how to use nested routing in Vue Router.

1. First, we need to create a Vue.js application and introduce Vue Router. We can use the Vue CLI to create a new Vue.js project, or manually add Vue Router to an existing project.
2. Next, we need to configure Vue Router. In the Vue Router configuration file, we can define different routes and the components corresponding to each route. In this configuration file, we can use the children field to define child routes. For example:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
import Products from './components/Products.vue'
import ProductDetail from './components/ProductDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  },
  {
    path: '/products',
    component: Products,
    children: [
      {
        path: ':id',
        component: ProductDetail
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

In the above code, we define a parent route /products, and a child route :id. Sub-level routing :id uses dynamic routing parameters to match different product details pages.

3. In the application's entry file (usually main.js), we need to add the Vue Router to the Vue instance. For example:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

4. Now we can use nested routing in components. We can use <router-view></router-view> in the parent component to display the component corresponding to the current route, and use <router-view></router-view> in the child component to display the child component. The component corresponding to level routing.

In the above example, we can create a Products component to display the product list, and a ProductDetail component to display the details of a single product . In the template of the parent component Products, we can add <router-view></router-view> to display the components corresponding to the child route. For example:

<template>
  <div>
    <h2 id="Products">Products</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/products/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

In the child component ProductDetail, we can use $route.params to obtain dynamic routing parameters. For example:

<template>
  <div>
    <h3 id="product-name">{{ product.name }}</h3>
    <p>{{ product.description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {}
    }
  },
  created() {
    const productId = this.$route.params.id
    // 根据productId从后端获取数据，并将数据赋值给product
    // ...
  }
}
</script>

Through the above steps, we can use nested routing in Vue Router. Parent routing can be used to display parent components, and it can also contain child routing to display child components. Using dynamic routing parameters, we can display different content in child components based on different parameters.

Summary:
Nested routing is a very useful feature in Vue Router, which can help us build complex page structures. In this article, we briefly introduce the use of nested routing in Vue Router and give code examples. I hope that through studying this article, readers can master the basic usage of nested routing in Vue Router, so as to better apply it to their own Vue.js projects.

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