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 <router-view></router-view> 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 <router-link></router-link> and <router-view></router-view> components

in our Vue component , we can use the <router-link></router-link> component to jump between routes, and use the <router-view></router-view> 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 <router-link></router-link> component to jump to the corresponding path respectively. In the <router-view></router-view> 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 <router-link></router-link> and <router-view></router-view> 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!