MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue Router 嵌套路由的设计与实现技巧

2021-01-284.9k 阅读

理解 Vue Router 嵌套路由的基本概念

在 Vue 应用开发中，嵌套路由是构建复杂单页应用（SPA）不可或缺的一部分。Vue Router 作为 Vue.js 官方的路由管理器，为实现嵌套路由提供了简洁而强大的功能。

嵌套路由意味着在一个路由组件内部，还可以包含其他子路由组件。例如，一个电商应用可能有一个 Product 页面，而在 Product 页面内，又有 ProductDetails 和 ProductReviews 等子页面。这种层级结构通过嵌套路由来实现，使得应用的导航结构更加清晰，用户体验更加流畅。

嵌套路由的设计原则

  1. 清晰的层级结构：在设计嵌套路由时，首先要明确应用的页面层级关系。这有助于合理规划路由配置，避免出现混乱的嵌套层次。例如，在一个博客应用中，可能有 Blog 作为顶层路由，其下包含 ArticleList 和 ArticleDetails 等子路由。ArticleDetails 还可能有评论等更深层次的嵌套。
  2. 功能模块化：将相关功能的组件放在同一层级的嵌套路由下，便于代码的组织和维护。比如在一个后台管理系统中，用户管理模块可以有 UserList、UserEdit 等子路由，它们都围绕用户管理功能展开，这样在代码结构上更加清晰，后期修改和扩展也更容易。
  3. 用户体验优先：设计嵌套路由要考虑用户如何在应用中导航。确保路由的切换流畅，不会让用户感到困惑。例如，在一个多步骤的表单应用中，使用嵌套路由实现步骤的切换，每个步骤对应一个子路由，这样用户可以方便地前进和后退，同时页面结构也更加清晰。

嵌套路由在 Vue Router 中的配置

在 Vue Router 中配置嵌套路由非常直观。首先，在 router/index.js 文件中定义路由。假设我们有一个简单的应用，包含一个 Home 页面和一个 User 页面，User 页面又有 UserProfile 和 UserSettings 两个子页面。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import User from '@/components/User'
import UserProfile from '@/components/UserProfile'
import UserSettings from '@/components/UserSettings'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/user',
      name: 'User',
      component: User,
      children: [
        {
          path: 'profile',
          name: 'UserProfile',
          component: UserProfile
        },
        {
          path:'settings',
          name: 'UserSettings',
          component: UserSettings
        }
      ]
    }
  ]
})

在上述代码中，User 路由的 children 数组定义了其嵌套路由。每个子路由都有自己的 path、name 和 component。注意，子路由的 path 不需要以 / 开头，它会继承父路由的路径。

嵌套路由的视图展示

  1. 父组件模板：父组件的模板需要为子路由提供展示的位置。在 User 组件的模板中，我们使用 <router - view> 标签来显示子路由的内容。
<template>
  <div>
    <h1>User Page</h1>
    <router - view></router - view>
  </div>
</template>

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

<style scoped>
</style>
  1. 子组件模板：子组件如 UserProfile 和 UserSettings 各自有自己的模板内容。
<template>
  <div>
    <h2>User Profile</h2>
    <p>这里展示用户的个人资料。</p>
  </div>
</template>

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

<style scoped>
</style>

动态嵌套路由

  1. 动态路由参数：在嵌套路由中，也经常需要使用动态路由参数。例如，我们可能需要根据用户 ID 来展示不同用户的个人资料。修改 UserProfile 子路由的配置如下：
{
  path: 'profile/:userId',
  name: 'UserProfile',
  component: UserProfile
}

在 UserProfile 组件中，可以通过 $route.params.userId 来获取动态参数。

<template>
  <div>
    <h2>User Profile of User ID: {{ $route.params.userId }}</h2>
    <p>这里展示用户的个人资料。</p>
  </div>
</template>

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

<style scoped>
</style>
  1. 响应参数变化：当动态参数变化时，组件不会自动重新渲染。为了在参数变化时更新组件，我们可以使用 watch 监听 $route 对象。
<template>
  <div>
    <h2>User Profile of User ID: {{ userId }}</h2>
    <p>这里展示用户的个人资料。</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data() {
    return {
      userId: ''
    }
  },
  created() {
    this.userId = this.$route.params.userId
  },
  watch: {
    '$route': function(newRoute) {
      this.userId = newRoute.params.userId
    }
  }
}
</script>

<style scoped>
</style>

嵌套路由的导航守卫

  1. 全局导航守卫：在嵌套路由中，全局导航守卫同样适用。例如，我们可以在全局前置守卫中进行用户认证检查。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import User from '@/components/User'
import UserProfile from '@/components/UserProfile'
import UserSettings from '@/components/UserSettings'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/user',
      name: 'User',
      component: User,
      children: [
        {
          path: 'profile',
          name: 'UserProfile',
          component: UserProfile
        },
        {
          path:'settings',
          name: 'UserSettings',
          component: UserSettings
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = true // 假设这里通过某种方式判断用户是否已认证
  if (to.path.startsWith('/user') &&!isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

export default router
  1. 组件内导航守卫：在嵌套路由的组件内，也可以使用导航守卫。例如，在 UserSettings 组件中，我们可以在离开该页面时提示用户是否保存更改。
<template>
  <div>
    <h2>User Settings</h2>
    <p>这里进行用户设置操作。</p>
  </div>
</template>

<script>
export default {
  name: 'UserSettings',
  beforeRouteLeave(to, from, next) {
    const hasUnsavedChanges = true // 假设这里通过某种方式判断是否有未保存的更改
    if (hasUnsavedChanges) {
      const confirmLeave = window.confirm('你有未保存的更改，确定离开吗？')
      if (confirmLeave) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  }
}
</script>

<style scoped>
</style>

嵌套路由与过渡效果

  1. 路由过渡基础：Vue Router 支持为路由切换添加过渡效果。通过使用 <transition> 组件，可以为嵌套路由实现平滑的过渡动画。例如，我们为 User 组件及其子路由添加淡入淡出的过渡效果。
<template>
  <div>
    <h1>User Page</h1>
    <transition name="fade">
      <router - view></router - view>
    </transition>
  </div>
</template>

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

<style scoped>
.fade - enter - active,
.fade - leave - active {
  transition: opacity 0.5s;
}
.fade - enter,
.fade - leave - to {
  opacity: 0;
}
</style>
  1. 过渡模式：可以通过 mode 属性来控制过渡模式。例如，mode="out - in" 表示新组件先进入，旧组件再离开，这样可以避免过渡过程中的闪烁。
<template>
  <div>
    <h1>User Page</h1>
    <transition name="fade" mode="out - in">
      <router - view></router - view>
    </transition>
  </div>
</template>

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

<style scoped>
.fade - enter - active,
.fade - leave - active {
  transition: opacity 0.5s;
}
.fade - enter,
.fade - leave - to {
  opacity: 0;
}
</style>

嵌套路由的懒加载

  1. 为什么要懒加载：随着应用规模的增大，代码体积也会随之增加。如果所有组件在应用启动时都加载，会导致首屏加载时间过长。懒加载可以将组件的加载推迟到实际需要时，从而提高应用的性能。
  2. 懒加载在嵌套路由中的实现：在 Vue Router 中，使用动态导入语法来实现懒加载。修改 router/index.js 文件如下：
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/components/Home')
    },
    {
      path: '/user',
      name: 'User',
      component: () => import('@/components/User'),
      children: [
        {
          path: 'profile',
          name: 'UserProfile',
          component: () => import('@/components/UserProfile')
        },
        {
          path:'settings',
          name: 'UserSettings',
          component: () => import('@/components/UserSettings')
        }
      ]
    }
  ]
})

在上述代码中，import() 函数会在路由被访问时异步加载组件，从而实现懒加载。

处理嵌套路由中的 404 页面

  1. 全局 404 路由：在 Vue Router 中，可以通过定义一个通配符路由来处理 404 页面。在 router/index.js 中添加如下配置：
{
  path: '*',
  name: 'NotFound',
  component: () => import('@/components/NotFound')
}
  1. 嵌套路由中的 404 处理：在嵌套路由中，如果子路由匹配失败，也可以在父组件中进行处理。例如，在 User 组件中，可以定义一个子路由通配符来处理特定于 User 模块的 404 情况。
{
  path: '/user',
  name: 'User',
  component: User,
  children: [
    {
      path: 'profile',
      name: 'UserProfile',
      component: UserProfile
    },
    {
      path:'settings',
      name: 'UserSettings',
      component: UserSettings
    },
    {
      path: '*',
      name: 'UserNotFound',
      component: () => import('@/components/UserNotFound')
    }
  ]
}

这样，当用户访问 /user 下不存在的子路由时，会显示 UserNotFound 组件。

嵌套路由与路由元信息

  1. 定义路由元信息：路由元信息是在路由配置中添加的自定义数据。例如，我们可以为 UserProfile 路由添加一个 requiresAuth 元信息，表示该路由需要用户认证。
{
  path: 'profile/:userId',
  name: 'UserProfile',
  component: UserProfile,
  meta: {
    requiresAuth: true
  }
}
  1. 使用路由元信息：在导航守卫中，可以使用路由元信息来进行权限控制。例如，在全局前置守卫中：
router.beforeEach((to, from, next) => {
  const isAuthenticated = true // 假设这里通过某种方式判断用户是否已认证
  if (to.meta.requiresAuth &&!isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

通过这种方式，可以根据不同路由的元信息来实现灵活的权限管理。

嵌套路由的 SEO 优化

  1. 页面标题优化：在嵌套路由中，为每个页面设置合适的标题对于 SEO 很重要。可以在组件的 created 钩子函数中根据路由信息设置页面标题。
<template>
  <div>
    <h2>User Profile</h2>
    <p>这里展示用户的个人资料。</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  created() {
    document.title = `用户个人资料 - ${this.$route.params.userId}`
  }
}
</script>

<style scoped>
</style>
  1. Meta 标签优化：同样，为页面添加合适的 Meta 标签也有助于 SEO。可以使用第三方库如 vue - meta 来管理 Meta 标签。

首先安装 vue - meta：

npm install vue - meta --save

然后在 main.js 中引入并使用：

import Vue from 'vue'
import VueMeta from 'vue - meta'
import App from './App.vue'
import router from './router'

Vue.use(VueMeta)

Vue.config.productionTip = false

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

在组件中设置 Meta 标签：

<template>
  <div>
    <h2>User Profile</h2>
    <p>这里展示用户的个人资料。</p>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  metaInfo: {
    title: '用户个人资料',
    meta: [
      {
        name: 'description',
        content: '这里是用户个人资料页面，展示用户详细信息。'
      }
    ]
  }
}
</script>

<style scoped>
</style>

嵌套路由的性能优化

  1. 避免不必要的重渲染：在嵌套路由组件中，要注意避免不必要的重渲染。例如，通过合理使用 key 属性来控制组件的更新。如果子路由组件在不同路由参数下需要保持状态，可以为 <router - view> 标签添加 :key="$route.fullPath"。
<template>
  <div>
    <h1>User Page</h1>
    <router - view :key="$route.fullPath"></router - view>
  </div>
</template>

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

<style scoped>
</style>
  1. 优化数据获取：对于嵌套路由中的数据获取，要尽量减少重复请求。可以使用 Vuex 来管理共享数据，在路由切换时判断数据是否已存在，避免重复从服务器获取。例如，在 UserProfile 组件中：
<template>
  <div>
    <h2>User Profile</h2>
    <p v - if="user">用户姓名：{{ user.name }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UserProfile',
  computed: {
   ...mapGetters(['user'])
  },
  created() {
    if (!this.user) {
      // 从服务器获取用户数据
    }
  }
}
</script>

<style scoped>
</style>

嵌套路由的测试

  1. 单元测试：对于嵌套路由组件，可以使用 Jest 和 Vue Test Utils 进行单元测试。例如，测试 UserProfile 组件：
import { mount } from '@vue/test - utils'
import UserProfile from '@/components/UserProfile'

describe('UserProfile.vue', () => {
  it('renders correct content', () => {
    const wrapper = mount(UserProfile, {
      mocks: {
        $route: {
          params: {
            userId: '123'
          }
        }
      }
    })
    expect(wrapper.find('h2').text()).toContain('User Profile of User ID: 123')
  })
})
  1. 集成测试：使用 Cypress 等工具进行集成测试，可以模拟用户在嵌套路由中的导航操作，测试路由切换、数据加载等功能。例如，测试从 User 页面导航到 UserProfile 页面：
describe('Nested Routes Navigation', () => {
  it('navigates to UserProfile from User', () => {
    cy.visit('/user')
    cy.contains('UserProfile').click()
    cy.url().should('include', '/user/profile')
  })
})

通过以上对 Vue Router 嵌套路由的设计与实现技巧的详细介绍，包括配置、导航守卫、过渡效果、懒加载、SEO 优化、性能优化和测试等方面，希望能帮助开发者更好地构建复杂且高效的 Vue 单页应用。在实际开发中，根据具体的业务需求和应用场景，灵活运用这些技巧，可以提升应用的质量和用户体验。