Vue 3路由详解：从基础配置到高级技巧

引言

Vue Router是Vue.js官方的路由管理器。它与Vue.js核心深度集成，让构建单页面应用变得易如反掌。在Vue 3中，Vue Router也进行了相应的升级，带来了新的特性和改进。本文将详细介绍Vue 3中路由的配置和使用，从基础到高级，全面覆盖Vue Router的各个方面。

1. 安装和基础设置

1.1 安装

首先，我们需要安装Vue Router：

npm install vue-router@4

1.2 创建路由实例

在Vue 3项目中，我们通常在src目录下创建一个router文件夹，并在其中创建index.js文件：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

1.3 在Vue应用中使用路由

在main.js中引入并使用路由：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

2. 路由配置详解

2.1 路由模式

Vue Router 4支持两种路由模式：

• Hash模式：使用URL的hash来模拟一个完整的URL。
• History模式：使用HTML5 History API来实现URL的变化。

// Hash模式
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
})

// History模式
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

2.2 路由匹配

Vue Router支持动态路由匹配：

const routes = [
  { path: '/user/:id', component: User }
]

在组件中可以通过$route.params.id访问id参数。

2.3 嵌套路由

Vue Router允许我们创建嵌套路由配置：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
]

3. 编程式导航

除了使用<router-link>创建导航链接，我们还可以借助router的实例方法来实现编程式导航。

3.1 使用push方法

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

3.2 使用replace方法

router.replace()和router.push()很像，唯一的不同就是，它不会向history添加新记录，而是替换掉当前的history记录。

router.replace({ path: '/home' })

4. 路由守卫

路由守卫主要用来通过跳转或取消的方式守卫导航。

4.1 全局前置守卫

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

4.2 路由独享的守卫

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // 拒绝导航
      return false
    }
  }
]

4.3 组件内的守卫

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
  }
}

5. 路由元信息

定义路由的时候可以配置meta字段：

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]

然后在导航守卫中访问这个meta字段：

router.beforeEach((to, from) => {
  // 而不是去检查每条路由记录
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，则重定向到登录页面
    return {
      path: '/login',
      // 保存我们所在的位置，以便以后再来
      query: { redirect: to.fullPath },
    }
  }
})

6. 懒加载路由

当打包应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

const routes = [
  {
    path: '/about',
    name: 'About',
    // 路由级代码分割
    // 这会为此路由生成一个单独的chunk (About.[hash].js)
    // 当路由访问时会懒加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

7. 滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。Vue Router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  }
})

结语

Vue Router是Vue.js生态系统中不可或缺的一部分，它为单页应用提供了强大的路由管理功能。本文详细介绍了Vue 3中Vue Router的配置和使用，从基础设置到高级特性，希望能帮助你更好地理解和使用Vue Router。随着你的应用不断发展，你会发现Vue Router提供的这些功能会让你的开发过程更加顺畅和高效。

记住，路由不仅仅是将URL映射到组件，它还涉及到数据获取、权限控制、代码分割等多个方面。深入理解Vue Router，将帮助你构建更加复杂和强大的Vue应用。