开启 URL 之旅：揭开 Vue Router 路由跳转的奥秘

Vue Router 4 源码解析 2：URL 如何跳转

序言

在浩瀚的互联网海洋中，URL 如同航海图上的坐标，引导我们探索数不胜数的数字港湾。在 Vue.js 的世界里，Vue Router 作为掌舵人，承担着将 URL 解析为相应页面的重任。

基础概念：Location 对象

启航之前，我们先来了解浏览器的 window.location 对象。它就像一本航海日志，记录着当前页面的 URL、协议、端口等信息。当我们输入一个 URL 时，location 对象就会自动更新，为路由跳转做好准备。

Vue Router 的幕后运作

当我们点击一个链接或在浏览器地址栏输入一个 URL 时，Vue Router 会接管舞台，开启它的 URL 跳转之旅。

1. 解析 URL

Vue Router 首先会解析 URL，提取其中的路由信息。它会根据配置的路由规则，匹配 URL 中的路径和参数。

2. 创建新视图

匹配到路由后，Vue Router 会创建新的视图实例，也就是我们即将看到的页面内容。

3. 导航守卫

在创建视图之前，Vue Router 会触发导航守卫。导航守卫是一个钩子函数，可以在页面切换之前执行一些操作，例如权限检查或数据预加载。

4. 更新 history

如果导航守卫没有阻止跳转，Vue Router 会调用浏览器的 history API（例如 pushState 或 replaceState）来更新浏览器历史记录。这样，用户就可以通过浏览器的后退和前进按钮在页面之间切换。

5. 渲染视图

更新 history 后，Vue Router 才会渲染新的视图。

以下代码片段展示了 Vue Router 如何处理 URL 跳转：

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    }
  ]
});

// 监听 URL 变化
router.afterEach((to, from) => {
  // 导航守卫：检查是否需要权限
  if (to.meta.requiresAuth && !store.state.auth.isLoggedIn) {
    return router.push('/login');
  }

  // 更新浏览器历史记录
  window.history.pushState({}, '', to.fullPath);

  // 渲染新视图
  document.getElementById('app').innerHTML = '<router-view></router-view>';
  router.app.mount('#app');
});

Vue Router 就像一个熟练的船长，带领我们穿梭在 URL 的海洋中。它通过解析 URL、创建视图、更新 history 和渲染页面，为我们提供了流畅而便捷的导航体验。