VUE路由嵌套

2023-09-02 16:42:01

Vue路由嵌套简介

Vue路由嵌套，又称子路由，是指在Vue应用程序中使用多层嵌套组件来构建复杂的用户界面。嵌套路由允许您将应用程序的不同部分组织成父子关系，从而创建更具结构性和可维护性的代码。

2. 实战：创建用户信息组件

为了演示Vue路由嵌套，我们将创建一个名为“用户信息”的组件，并将其嵌套在主应用程序组件中。

首先，在views/user目录下创建一个名为Profile.vue的文件，并添加以下代码：

<template>
  <div>
    <h1>用户资料</h1>
    <p>用户名：{{ user.name }}</p>
    <p>用户邮箱：{{ user.email }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John Doe',
        email: 'johndoe@example.com'
      }
    };
  }
};
</script>

这个组件将显示用户信息，包括姓名和电子邮件。

3. 创建路由

接下来，我们需要在Vue Router中配置路由，以便能够访问“用户信息”组件。在router/index.js文件中添加以下代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Profile from '@/views/user/Profile.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/user/profile',
    component: Profile
  }
];

const router = new VueRouter({
  routes
});

export default router;

这个路由配置将创建一个新的路由，路径为/user/profile，并将其组件设置为Profile.vue。

4. 使用嵌套路由

现在，我们可以在主应用程序组件中使用嵌套路由来访问“用户信息”组件。在App.vue文件中添加以下代码：

<template>
  <div>
    <h1>主应用程序</h1>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from '@/router';

Vue.use(VueRouter);

export default {
  router
};
</script>