How to use Vue-Router to implement nested routing in Vue application?

How to use Vue-Router to implement nested routing in a Vue application?

Vue-Router is the official routing manager of Vue.js, which can help us easily implement routing functions in single-page applications. In actual project development, we often encounter scenarios that require nested routing. For example, in a user management system, in addition to the home page, there are also sub-pages such as user list, user details, etc. This article will introduce how to use Vue-Router to implement nested routing in Vue applications and provide specific code examples.

First, we need to install Vue-Router. You can use npm or yarn to install Vue-Router dependencies:

npm install vue-router
# 或者
yarn add vue-router

After installation, we need to import Vue-Router in the entry file of the Vue application and register it using the Vue.use() method:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Then, we can create a routing instance and configure the routing:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: ':id',
        component: UserDetails
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

In the above code, we define two routes, one is the root route "/", and the corresponding component is Home; the other is the user route "/users", and the corresponding component is Users. In user routing, we define a sub-route ":id", and the corresponding component is UserDetails.

Next, we need to use the router instance in the Vue instance:

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例

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

Now we have completed the basic configuration of Vue-Router. Next we can create Home, Users and UserDetails components respectively, and render the components in the corresponding routes.

First, let’s create the Home component:

<template>
  <div>
    <h1 id="Home">Home</h1>
  </div>
</template>

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

Then, let’s create the Users component and display the user list and link to user details in this component:

<template>
  <div>
    <h1 id="Users">Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="'/users/' + user.id">{{ user.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view> <!--显示子路由组件-->
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

Finally, we create the UserDetails component to display the user's detailed information:

<template>
  <div>
    <h2 id="User-Details">User Details</h2>
    <p>ID: {{ $route.params.id }}</p>
    <p>Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserDetails',
  computed: {
    user() {
      const userId = parseInt(this.$route.params.id)
      return this.users.find(user => user.id === userId)
    }
  },
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

In the above code, we use $route.params.id to obtain the dynamic parameters in the route and obtain them based on this parameter Corresponding user information.

Now, we have completed the configuration of Vue-Router nested routing and the creation of components. Access the application in a browser and you will see a homepage and a navigation link to a list of users. Click on the "Users" link and you will see a list of users and can click on each user's link to view the user's details.

To summarize, to use Vue-Router to implement nested routing in a Vue application, we need to perform the following steps:

1. Install and import Vue-Router.
2. Create a routing instance and configure routing.
3. Use router instance in Vue instance.
4. Create the corresponding component and render the component in the required route.
5. Use the tag in the view to display sub-routing components.

Through the above steps, you will be able to successfully implement the nested routing function in your Vue application. Happy writing!

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