手把手带你撸Vue-Router，从底层源码看实现原理

2024-01-22 12:53:30

引言

在单页面应用（SPA）开发中，路由扮演着至关重要的角色，它负责管理应用中不同页面的导航和切换。Vue Router作为Vue.js生态系统中不可或缺的组件库，为开发者提供了强大的路由管理功能。

本文将带你深入Vue Router的底层源码，逐一剖析路由匹配、导航守卫、组件渲染等关键环节的运作机制。通过实战案例，手把手教你打造自己的Vue Router小demo，全面掌握路由管理的精髓，助力你的前端开发技能更上一层楼。

Vue Router的底层原理

路由匹配

Vue Router使用哈希模式或历史模式来匹配URL。当用户输入URL时，Vue Router会根据预先定义的路由规则进行匹配，找到与当前URL相对应的路由对象。

// hash模式
const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
})

// history模式
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

导航守卫

导航守卫是Vue Router提供的一种机制，允许你在路由切换时执行一些自定义操作。常用的导航守卫有：

beforeEach：在导航开始前执行，可以取消或修改导航。
afterEach：在导航完成后执行，可以进行一些收尾工作。

router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  if (to.path === '/admin' && !user.isLogin) {
    next('/login')
  } else {
    next()
  }
})

组件渲染

当路由匹配成功后，Vue Router会根据路由配置的component属性渲染相应的组件。组件的渲染过程与普通Vue组件渲染类似，但会受到路由参数的影响。

// Home.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue Router!'
    }
  }
}
</script>

实战案例：手打Vue Router小demo

为了加深对Vue Router的理解，我们来手把手打造一个简单的Vue Router小demo。

创建Vue项目

vue create vue-router-demo

安装Vue Router

npm install vue-router --save

在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 router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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

创建组件

// Home.vue
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue Router!'
    }
  }
}
</script>

// About.vue
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This is the about page'
    }
  }
}
</script>