如何在Vue应用程序中使用Vue-Router来实现嵌套路由？-Vue.js-PHP中文网

如何在Vue应用程序中使用Vue-Router来实现嵌套路由？

WBOY

发布： 2023-12-17 11:18:54

原创

1620人浏览过

如何在vue应用程序中使用vue-router来实现嵌套路由？

如何在Vue应用程序中使用Vue-Router来实现嵌套路由？

Vue-Router是Vue.js官方的路由管理器，能够帮助我们轻松地实现单页应用中的路由功能。在实际项目开发中，经常遇到需要嵌套路由的场景，比如在一个用户管理系统中，除了主页外还有用户列表、用户详情等子页面。本文将介绍如何在Vue应用程序中使用Vue-Router来实现嵌套路由，并提供具体的代码示例。

首先，我们需要安装Vue-Router。可以使用npm或yarn来安装Vue-Router依赖：

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

登录后复制

安装完毕后，我们需要在Vue应用程序的入口文件中导入Vue-Router，并使用Vue.use()方法进行注册：

立即学习“前端免费学习笔记（深入）”；

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

Vue.use(VueRouter)

登录后复制

然后，我们可以创建一个路由实例，并配置路由：

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

登录后复制

在以上代码中，我们定义了两个路由，一个是根路由"/"，对应的组件是Home；另一个是用户路由"/users"，对应的组件是Users。在用户路由中，我们定义了一个子路由":id"，对应的组件是UserDetails。

接下来，我们需要在Vue实例中使用router实例：

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

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

登录后复制

现在我们已经完成了Vue-Router的基本配置。下面我们可以分别创建Home、Users和UserDetails组件，并在对应的路由中进行组件的渲染。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

首先，让我们来创建Home组件：

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

登录后复制

然后，我们来创建Users组件，并在该组件中显示用户列表和链接到用户详情：

<template>
  <div>
    <h1>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>

登录后复制

最后，我们创建UserDetails组件，用于显示用户的详细信息：

<template>
  <div>
    <h2>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>

登录后复制

在以上代码中，我们使用$route.params.id来获取路由中的动态参数，并根据该参数来获取对应的用户信息。

现在，我们已经完成了Vue-Router嵌套路由的配置和组件的创建。在浏览器中访问应用程序，你将会看到一个主页和一个链接到用户列表的导航链接。点击"Users"链接，你将会看到用户列表，并可以点击每个用户的链接来查看用户的详细信息。

总结起来，要在Vue应用程序中使用Vue-Router来实现嵌套路由，我们需要进行以下几个步骤：