Vue3最新Router带来哪些颠覆性变化？
1 前后端开发模式的演变
jQuery时对大部分Web项目，前端不能控制路由，要依赖后端项目的路由系统。通常，前端项目也部署在后端项目的模板里，项目执行示意图：
jQuery前端都要学会在后端模板如JSP里写代码。此时，前端工程师无需了解路由。对每次的页面跳转，都由后端负责重新渲染模板。
前端依赖后端，且前端无需负责路由，有很多
优点
如开发速度快、后端也承担部分前端任务，所以至今很多内部管理系统还这样。
缺点
如：
- 前后端项目无法分离
- 页面跳转由于需重新刷新整个页面、等待时间较长，让交互体验下降
为提高页面交互体验，很多前端做不同尝试。前端开发模式变化，项目结构也变化。目前前端开发中，用户访问页面后代码执行的过程：
- 用户访问路由后，无论URL地址，都直接渲染一个前端的入口文件index.html，然后在index.html文件中加载JS、CSS
- 之后，js获取当前页面地址及当前路由匹配的组件
- 再去动态渲染当前页面
用户在页面上点击时，也不需刷新页面，而直接通过JS重新计算出匹配的路由渲染。
前后两个示意图中，绿色的部分表示的就是前端负责的内容。后面这架构下，前端获得路由的控制权，在js中控制路由系统。也因此，页面跳转时就不需刷新页面，网页浏览体验提高。 这种所有路由都渲染一个前端入口文件的方式，是单页面应用程序（SPA）的雏形。
通过js动态控制数据去提高用户体验的方式并不新奇，Ajax让数据获取不需刷新页面，SPA应用让路由跳转也不需要刷新页面。这种开发模式在jQuery时代就出来，浏览器路由的变化可以通过pushState来操作，这种纯前端开发应用的方式，以前称Pjax （pushState+ Ajax）。之后，这种开发模式在MVVM框架时代放异彩，现在大部分使用Vue/React/Angular应用都这种架构。
SPA应用相比于模板的开发方式，对前端更友好，如：
- 前端对项目控制权更大
- 交互体验更丝滑
- 前端项目终于可独立部署
完成了前后端系统完全分离。
2 前端路由的实现原理
通过URL区分路由的机制实现：
- hash模式，通过URL中#后面的内容做区分，hash-router
- history模式，路由看起来和正常URL一致
对应vue-router的函数：
- createWebHashHistory
- createWebHistory
2.1 hash 模式
单页应用在页面交互、页面跳转上都是无刷新的，极大提高用户访问网页的体验。 为实现单页应用，前端路由的需求也变重要。
类似服务端路由，前端路由实现也简单，就是匹配不同 URL 路径，进行解析，然后动态渲染出区域 HTML 内容。但URL每次变化都会造成页面的刷新。解决思路：改变 URL 时保证页面的不刷新。
2014年前，大家通过 hash 实现前端路由，URL hash 中的 # 类似下面这种 # ：
http://www.xxx.com/#/login
之后，在进行页面跳转操作时，hash 值变化并不会导致浏览器页面刷新，只会触发hashchange事件。在下面的代码中，通过对hashchange事件的监听，就可在fn函数内部进行动态地页面切换。
window.addEventListener('hashchange',fn)
2.2 history 模式
2014年后HTML5标准发布，浏览器多API：pushState 和 replaceState。可改变 URL 地址，并且浏览器不会向后端发送请求，就能用另外一种方式实现前端路由。
监听popstate事件，可监听到通过pushState修改路由的变化。并且在fn函数中，我们实现了页面的更新
window.addEventListener('popstate', fn)
3 手写vue-router
- src/router新建grouter文件夹
- 在grouter文件夹新建index.js
手写Vuex的基础，在index.js写代码。
先用Router类去管理路由，并用createWebHashHistory返回hash模式相关的监听代码及返回当前URL和监听hashchange事件的方法
import {ref,inject} from 'vue'
const ROUTER_KEY = '__router__'
function createRouter(options){
return new Router(options)
}
function useRouter(){
return inject(ROUTER_KEY)
}
function createWebHashHistory(){
function bindEvents(fn){
window.addEventListener('hashchange',fn)
}
return {
bindEvents,
url:window.location.hash.slice(1) || '/'
}
}
class Router {
constructor(options) {
this.history = options.history
this.routes = options.routes
this.current = ref(this.history.url)
this.history.bindEvents(()=>{
this.current.value = window.location.hash.slice(1)
})
}
// 通过Router类install方法注册Router实例
install(app) {
app.provide(ROUTER_KEY,this)
}
}
// 暴露createRouter方法创建Router实例
// 暴露useRouter方法，获取路由实例
export {createRouter,createWebHashHistory,useRouter}
回到src/router/index.js：
import {createRouter, createWebHashHistory} from './grouter/index'
const router = createRouter({
history: createWebHashHistory(),
// 使用routes作为页面参数传递给createRouter函数
routes
})
在createRouter创建的Router实例上，current返回当前路由地址，并用ref包裹成响应式数据。
注册两个内置组件：
- router-view：就是current变化时，去匹配current地址对应组件，然后动态渲染到router-view。
- router-link
实现RouterView组件
grouter下新建RouterView.vue。
<template>
4. 在template内部使用component组件动态渲染
<component :is="comp"></component>
</template>
<script setup>
import {computed } from 'vue'
import { useRouter } from '../grouter/index'
// 1. 先用useRouter获取当前路由的实例
let router = useRouter()
// 3. 最后通过计算属性返回comp变量
const comp = computed(()=>{
// 2. 通过当前的路由，即router.current.value值，在用户路由配置route中计算出匹配的组件
const route = router.routes.find(
(route) => route.path === router.current.value
)
return route?route.component : null
})
</script>
实现router-link组件
grouter下新建RouterILink.vue。template是渲染个a标签，只是将其href属性前加个#， 实现hash的修改。
<template>
<a :href="'#'+props.to">
<slot />
</a>
</template>
<script setup>
import {defineProps} from 'vue'
let props = defineProps({
to:{type:String,required:true}
})
</script>
回到grouter/index.js，注册router-link、router-view组件，hash模式mini-vue-router就实现了。
import {ref,inject} from 'vue'
import RouterLink from './RouterLink.vue'
import RouterView from './RouterView.vue'
class Router{
....
install(app){
app.provide(ROUTER_KEY,this)
app.component("router-link",RouterLink)
app.component("router-view",RouterView)
}
}
vue-router还需处理路由懒加载、路由的正则匹配等。
4 vue-router实战路由匹配
vue-router支持动态路由。某用户页面使用User组件，但每个用户信息不一，需给每个用户配置单独的路由入口，就可按下面代码样式配置路由。
冒号开头的id就是路由的动态部分，同时匹配/user/dasheng和/user/javaedge， 详见 官方文档的路由匹配语法部分。
const routes = [
{ path: '/users/:id', component: User },
]
有些页面，仅管理员可访问，普通用户访问提示无权限。得用vue-router的 路由守卫功能 ，即访问路由页面之前进行权限认证，做到页面级控制，只允许某些用户访问。
项目庞大后，如果首屏加载文件太大，就可能影响性能。可用vue-router的 动态导入功能，把不常用的路由组件单独打包，当访问到这个路由的时候再进行加载，这也是vue项目常见优化方式。
5 总结
前后端开发模式演进：前端项目经历的从最初的嵌入到后端内部发布，再到如今前后端分离，也见证了前端SPA发展。
前端路由实现的两种方式，即通过监听不同的浏览器事件，实现hash、history模式。之后，根据这原理，手写vue-router，通过createRouter创建路由实例，并在app.use函数内部执行router-link和router-view组件的注册，最后在router-view组件内部动态的渲染组件。
Vue Router 路由实现步骤
路由配置：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/user/login.vue')
},
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
meta: { requiresAuth: true } // 需要登录权限
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
路由守卫：
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.meta.requiresAuth && !token) {
// 需要登录但未登录，重定向到登录页
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
})
登录组件中使用路由：
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const login = async () => {
try {
await doLogin()
// 登录成功后跳转
const redirect = route.query.redirect || '/'
router.push(redirect)
} catch (error) {
handleError(error)
}
}
const logout = async () => {
localStorage.removeItem('token')
router.push('/login')
}
</script>
主应用挂载路由：
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
路由视图渲染：
<template>
<router-view></router-view>
</template>
路由流程：
- 配置路由表
- 设置路由守卫
- 组件中注入路由
- 应用挂载路由
- 视图渲染组件
使用方式：
- 声明式:
<router-link to="/login"> - 编程式:
router.push('/login')
FAQ
60行代码实现hash模式的迷你vue-router，支持history模式的迷你vue-router咋实现？
实现支持 history 模式 的迷你 Vue Router 的核心是利用 HTML5 提供的 pushState 和 replaceState API，以及监听 popstate 事件来响应浏览器的回退、前进等操作。以下是支持 history 模式的迷你 Vue Router 的实现步骤：
实现 history 模式的 createWebHistory 方法
在 src/router/grouter/index.js 中修改或新增以下代码，用于返回 history 模式相关的监听逻辑：
function createWebHistory() {
function bindEvents(fn) {
window.addEventListener('popstate', fn);
}
function push(url) {
history.pushState(null, '', url); // 修改浏览器地址但不刷新页面
}
return {
bindEvents,
push,
url: window.location.pathname || '/', // 获取当前路径
};
}
修改 Router 类
扩展 Router 类，支持 history 模式的路由变化处理：
class Router {
constructor(options) {
this.history = options.history;
this.routes = options.routes;
this.current = ref(this.history.url);
this.history.bindEvents(() => {
this.current.value = window.location.pathname;
});
}
// 编程式导航（例如 router.push('/path')）
push(url) {
this.history.push(url);
this.current.value = url;
}
install(app) {
app.provide(ROUTER_KEY, this);
app.component('router-link', RouterLink);
app.component('router-view', RouterView);
}
}
修改 RouterLink 组件
支持 history 模式的 RouterLink 组件不需要 # 前缀，使用编程式导航：
<template>
<a @click.prevent="navigate">{{ $slots.default() }}</a>
</template>
<script setup>
import { defineProps, inject } from 'vue';
const props = defineProps({
to: { type: String, required: true },
});
const router = inject('__router__');
function navigate() {
router.push(props.to);
}
</script>
注册 Vue Router
在 src/router/index.js 中注册使用 createWebHistory 的路由实例：
import { createRouter, createWebHistory } from './grouter/index';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
配置 Web 服务
要支持 history 模式，需要配置服务器以处理所有的路径。以 Nginx 为例，配置如下：
server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/your/app;
index index.html;
try_files $uri /index.html;
}
}
hash V.S history模式
| 特点 | Hash 模式 | History 模式 | | -------------- | --------------------------- | ------------------------- | | URL 格式 | http://example.com/#/path | http://example.com/path | | 浏览器刷新处理 | 不需后端额外支持 | 需服务器配置支持 | | SEO | 不友好 | 更友好 | | 实现复杂度 | 简单 | 较复杂 |、
本文已收录在Github，关注我，紧跟本系列专栏文章，咱们下篇再续！
作者简介：魔都架构师，多家大厂后端一线研发经验，在分布式系统设计、数据平台架构和AI应用开发等领域都有丰富实践经验。
各大技术社区头部专家博主。具有丰富的引领团队经验，深厚业务架构和解决方案的积累。
负责：
- 中央/分销预订系统性能优化
- 活动&券等营销中台建设
- 交易平台及数据中台等架构和开发设计
- 车联网核心平台-物联网连接平台、大数据平台架构设计及优化
- LLM Agent应用开发
- 区块链应用开发
- 大数据开发挖掘经验
- 推荐系统项目
目前主攻市级软件项目设计、构建服务全社会的应用系统。
参考：
本文由博客一文多发平台 OpenWrite 发布！
