How to use Vue Router to implement multi-level routing nesting and matching?

How to use Vue Router to implement multi-level routing nesting and matching?

Vue Router is the official routing manager of Vue.js, which can help us implement routing functions in single-page applications (SPA). In Vue Router, we can define various routing rules by configuring the routing table and implement route jumping and matching. In this article, we will focus on how to use Vue Router to implement multi-level route nesting and matching.

1. Install Vue Router

First, we need to install Vue Router in the project. You can use npm or yarn command to install Vue Router.

npm install vue-router

or

yarn add vue-router

2. Create routing instance

In the Vue project, we need to create a routing instance and connect it with the root instance of Vue Relate. Before creating a routing instance, we first need to create a routing table to define various routing rules. The routing table is an array composed of routing configuration objects. Each routing configuration object contains the routing path and corresponding components.

Assume that our project has the following multi-level routing nested structure:

- Home
  - About
    - Contact
  - News
    - Detail

We can define the following routing rules in the routing table:

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 News from '@/components/News.vue'
import Detail from '@/components/Detail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'contact',
        name: 'Contact',
        component: Contact
      }
    ]
  },
  {
    path: '/news',
    name: 'News',
    component: News,
    children: [
      {
        path: 'detail',
        name: 'Detail',
        component: Detail
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

In the above routing table , we have defined the following routing rules: The component corresponding to the

• / path is the Home.vue
• /about path The corresponding component is About.vue
• /about/contactThe component corresponding to the path is Contact.vue
• /newsThe component corresponding to the path is News.vue
• /news/detailThe component corresponding to the path is Detail.vue

3. Configuration root component

In our Vue root instance, we need to associate the routing instance we created with the root instance of Vue and render our routing component to the Vue root instance 975b587bf85a482ea10b0a28848e78a4 in the label.

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

Vue.config.productionTip = false

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

In the above code, we inject the routing instance we created into the Vue root instance through the router option, and mount the Vue root instance through the $mount('#app') method Mount to the DOM node with ID app.

4. Use b988a8fd72e5e0e42afffd18f951b277 and 975b587bf85a482ea10b0a28848e78a4 components

in our Vue component , we can use the b988a8fd72e5e0e42afffd18f951b277 component to jump between routes, and use the 975b587bf85a482ea10b0a28848e78a4 component to render the corresponding routing component.

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/about/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
    <router-link to="/news/detail">Detail</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

In the above code, we define multiple routing jump links through the b988a8fd72e5e0e42afffd18f951b277 component to jump to the corresponding path respectively. In the 975b587bf85a482ea10b0a28848e78a4 tag, we use Vue Router to dynamically render the corresponding routing component.

Using the above steps, we can implement multi-level routing nesting and matching in the Vue project. When we click on different routing links, the page will render the corresponding routing components to achieve dynamic switching and nesting of the page.

Summary

This article introduces how to use Vue Router to implement multi-level routing nesting and matching. By creating a routing table and associating routing instances in the Vue root instance, we can define multi-level routing rules in the Vue project and implement jumps and matching between routes. At the same time, we also introduced how to use the b988a8fd72e5e0e42afffd18f951b277 and 975b587bf85a482ea10b0a28848e78a4 components in Vue components to implement the rendering of routing links and routing components. I hope this article will be helpful to you when using Vue Router to implement multi-level routing nesting and matching.

Reference

• Vue Router official documentation: https://router.vuejs.org/

The above is the detailed content of How to use Vue Router to implement multi-level routing nesting and matching?. For more information, please follow other related articles on the PHP Chinese website!