VueRouter4课程指南：初学者友好的路由管理教程

Vue Router 4 是 Vue.js 的官方路由管理器，提供简化路由管理的高效解决方案。本文全面介绍 Vue Router 4 的使用，从环境准备、基础配置到实战演练，帮助开发者构建复杂的单页应用（SPA），强调了其简洁API和性能优化，以及在多页面应用中的应用与问题解决策略。

Vue Router 是 Vue.js 的官方路由管理器，自 Vue.js 2.x 版本起成为其核心功能之一。在 Vue Router 4 的更新中，开发团队进一步优化了其设计和性能，提供了更加灵活且高效的路由管理解决方案。本文将以初学者友好的方式，系统地介绍如何使用 Vue Router 4 进行路由配置和管理，旨在帮助开发者快速上手，轻松构建复杂的单页应用（SPA）。

创建Vue项目和安装Vue Router

首先，确保你已经安装了 Node.js 和 Vue CLI（Vue的命令行工具），然后通过Vue CLI创建一个新的Vue项目：

vue create my-project
cd my-project

在项目中安装Vue Router：

npm install vue-router

接下来，在main.js中引入并配置Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes,
  history: 'hash' // 可选，使用history模式需要HTML5 history API支持
})

new Vue({
  router
}).$mount('#app')

基础路由配置

使用createRouter与createWebHistory/webHashHistory

Vue Router 4 提供了更简洁的 API，通过createRouter和createWebHistory作为入口点。在上述示例中，我们已经使用了createWebHistory创建了路由历史记录。

在Vue应用中挂载路由实例

确保Vue应用能够接收并处理路由指令：

new Vue({
  router
}).$mount('#app')

路由导航与链接

使用router-link创建导航链接

在组件模板中，可以使用<router-link>组件创建美观的导航链接：

<template>
  <div>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
</template>

编程式导航与this.$router.push

除了使用<router-link>外，Vue组件实例也提供了this.$router.push方法来进行编程式导航：

<template>
  <div>
    <button @click="navigate">Go to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigate() {
      this.$router.push('/about')
    }
  }
}
</script>

导航守卫的基本使用

导航守卫允许我们控制路由跳转的条件：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)) {
    if (localStorage.getItem('token') === null) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

实战演练：构建一个多页面应用

设计路由结构

假设我们要创建一个博客应用，设计以下路由结构：

const routes = [
  { path: '/', component: Home },
  { path: '/post/:postId', component: PostDetail },
  { path: '/login', component: Login },
  { path: '/logout', component: Logout }
]

// Home.vue
export default {
  // 组件内容
}

// PostDetail.vue
export default {
  props: ['postId'],
  // 组件内容
}

// Login.vue
export default {
  // 组件内容
}

// Logout.vue
export default {
  // 组件内容
}

实现页面间传参与导航状态管理

在Home.vue中，使用this.$router.push跳转到特定的帖子详情页：

<template>
  <div>
    <!-- 导航到特定帖子的详情页面 -->
    <router-link :to="{ name: 'PostDetail', params: { postId: 1 } }">Post 1</router-link>
  </div>
</template>

在PostDetail.vue中，接收$route.params获取帖子ID：

export default {
  computed: {
    postId() {
      return this.$route.params.postId
    }
  },
  // 组件内容
}

常见问题与解决策略

路由刷新页面丢失问题

解决页面刷新时状态丢失问题，可使用keep-alive组件缓存子组件状态或在组件内部保存状态：

<template>
  <div>
    <!-- 缓存PostDetail组件的状态 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPostId: null
    }
  },
  mounted() {
    this.currentPostId = this.$route.params.postId
  },
  beforeRouteUpdate(to, from, next) {
    // 更新帖子ID对应的组件状态
    this.currentPostId = to.params.postId
    next()
  }
}
</script>

404页面的配置

默认情况下，Vue Router 会在未找到匹配的路由时显示当前应用的默认404页面。若需自定义404页面：

const routes = [
  // 其他路由
  { path: '*', redirect: '/404' }
]

// NotFound.vue
export default {
  // 组件内容
}

性能优化小技巧

• 懒加载：为动态路由分页实现按需加载，减少首屏加载时间：

  const routes = [
  // 其它路由
  { path: '/', component: () => import(/* webpackChunkName: "home" */ '../components/Home.vue') },
  ]

• 优化路由历史记录：减少不必要的路由跳转，合理配置路由以优化性能。

通过上述步骤，你可以构建功能丰富、易于管理的Vue应用，利用Vue Router 4的强大功能进行路由配置和导航控制。随着你的项目发展，你可能会更深入地探索Vue Router的高级特性，如参数守卫、命名视图、以及动态路由的灵活性等。