目录
路由的基本概念
1. 路由
2. 单页应用SPA
3.前端路由的实现方式
3.1Hash模式
3.2History模式
Vue router 4
1.概述
2.安装使用
3.基础用法
3.1路由匹配规则声明
3.2动态路由匹配
3.3路由命名
3.4路由重定向
3.5路由嵌套
3.6命名视图
3.6声明式导航&编程式导航
3.7历史记录模式
4.进阶用法
4.1导航守卫
4.11全局前置守卫
4.12全局后置钩子
4.13 路由独享的守卫
4.14组件内的守卫
4.2路由元信息
4.3RouterView 插槽
路由的基本概念
1. 路由
在前端开发中，路由（Routing）是一个核心概念，尤其是在单页应用（SPA）中。它描述的是URL与UI之间的映射关系，即当用户访问不同的URL时，前端应用会相应地展示不同的界面或组件，而无需重新从服务器加载整个页面。
2. 单页应用SPA
SPA指的是一个web网站只加载单个HTML页面，所有组件的展示与切换都在唯一的一个页面内完成。它通过路由切换界面（或组件），以及网络请求数据，实现页面的局部刷新或整体更新，而无需重新加载整个页面。
得益于无需全部重加载，SPA具有很多优点，尤其是页面切换快，减轻服务器压力。
3.前端路由的实现方式
3.1Hash模式
利用URL的hash值（即#后面的部分）来模拟一个完整的URL，以便在前端进行路由的匹配和页面的渲染。
①用户点击路由链接，导致hash值变化
②hash值变化，触发hashchange事件（而不会重新加载页面）
③路由监听hashchange事件的触发，根据hash值的变化来更新页面的内容
简单实现：
①HTML结构
<div id="app"></div>
<nav><a href="#/home">首页</a><a href="#/about">关于</a><a href="#/contact">联系我们</a>
</nav>②JS逻辑
window.onload = function () {// 初始化页面updateView()// 监听hashchange事件window.addEventListener('hashchange', function () {updateView()})function updateView() {//根据URL进行界面或组件的切换操作，如此处的更新<div id="app"></div>的渲染内容const hash = window.location.hashlet content = ''switch (hash) {case '#/home':content = '<h1>首页</h1>'breakcase '#/about':content = '<h1>关于</h1>'breakcase '#/contact':content = '<h1>联系我们</h1>'breakdefault:content = '<h1>404 Not Found</h1>'}document.getElementById('app').innerHTML = content}
}Hash模式，浏览器兼容性强，简单易用不需要服务器端的支持。但URL中包含了#号可能不太美观
3.2History模式
在History模式下，前端路由的实现方式与Hash模式类似，但URL的变化和监听机制不同。
①利用HTML5 History API（如history.pushState和history.replaceState方法）来实现URL的跳转，而不是直接设置window.location.hash。
②监听popstate事件，根据URL更新页面内容
由于History模式的实现相对复杂，并且需要服务器端的支持，因此在实际项目中，通常会使用Vue Router、React Router等前端路由库来简化开发。这些库已经封装了URL的修改、监听和页面内容更新的逻辑，并提供了丰富的路由配置选项。
Vue router 4
1.概述
Vue Router 是 Vue.js 的官方路由解决方案。它与 Vue.js 核心深度集成，让用 Vue 构建单页应用变得轻而易举。通过它，你可以轻松地管理应用中的页面跳转、路由守卫（如登录守卫），懒加载等功能。
（注意：以下介绍以 Vue Router 4 为基础，相比于Vue Router 3 引入了一些新的特性和改进）
官方文档：Vue Router | Vue.js 的官方路由
2.安装使用
以下操作环境基础为vue 3 Composition API和Vue Router 4。其他版本大同小异，可自行查阅相关文档
2.1 安装vue router
npm install vue-router@4
#
pnpm add vue-router@42.2 封装路由模块
在src下创建router目录，在router目录中创建index.js文件：
import { createMemoryHistory, createRouter } from "vue-router";
//引入组件
import About from "@/view/About.vue";
import Home from "@/view//Home.vue";//配置路由映射规则
const routes = [{ path: "/", component: Home },{ path: "/about", component: About },
];
//路由实例通过createRouter创建
const router = createRouter({history: createMemoryHistory(),routes,
});
export default router; //导出，用于main.js注册
①history栈在浏览器中是用于存储用户会话历史（即URL地址）的。后面再详细介绍
②routes数组，声明路由的匹配规则，是组件和URL的映射关系。
2.3 在main.js中注册路由插件
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";//引入const app = createApp(App);
app.use(router);//注册插件app.mount("#app");
全局注册该插件后，它会：
①全局注册RouterView和RouterLink组件
②添加全局$router和$route属性
③启用useRouter()和useRoute()组合式函数
④触发路由器解析初始路由
2.4 在组件中使用路由App.vue中
<script setup>
import { useRoute, useRouter } from 'vue-router'
//useRoute, useRouter 函数
const router = useRouter()
const route = useRoute()
console.log(route);
console.log(router);
</script><template><header><hr><!-- router-link组件 --><router-link to="/">首页</router-link><router-link to="/about">关于我们</router-link><!-- $router属性 --><button @click="$router.push('/')">首页</button><!-- $route属性 --><button @click="console.log($route)"></button><hr></header><main><!-- RouterView组件 定义路由出口 --><router-view></router-view></main>
</template>1）路由实例和路由信息对象：
①Vue Router路由实例，它是一个全局的路由对象，包含了路由的跳转方法、钩子函数等。你可以通过它来编程式地导航到不同的URL，或者监听路由导航事件。
②路由信息对象，包含了当前激活的路由的信息。这个对象是不可变的，每次路由切换时，Vue Router 都会更新这个对象，以反映当前路由的状态。
2）$router和$route 属性：
$router是路由实例，$route 是路由信息对象，它们在template模板中被暴露
3） useRouter() 和 useRoute() 函数：
在script标签中，可以通过 useRouter() 和 useRoute() 函数来访问路由器实例和当前路由。
4）RouterView和RouterLink组件 ：
RouterView，可将其视为一个占位符，Vue Router会将其替换为当前路由对应的组件。
RouterLink，用于创建导航链接的组件。它默认渲染为一个<a>标签，但其行为会根据当前的路由来自动地切换活动的class（当链接是激活状态时，它会自动添加一个.router-link-active的class），并且当用户点击链接时，它不会执行浏览器的默认跳转，而是会使用Vue Router来更改URL并渲染对应的组件。
3.基础用法
3.1路由匹配规则声明
通过 routes数组声明路由的匹配规则。path：要匹配的路由地址，component：要展示的组件
import Home from "@/view//Home.vue"
const routes = [{ path: "/home", component: Home },//或用动态导入代替静态导入（推荐）{ path: "/home", component: () => import("@/view/Home.vue") }
];3.2动态路由匹配
我们可以在路径中使用一个路径参数来将多个URL 映射到同一个路由：
const routes = [// 动态字段以冒号开始{ path: '/users/:username', component: User },
]像 /users/johnny 和 /users/jack 这样的 URL 都会映射到同一个路由，即渲染同一个User组件。
但从/users/johnny 导航到 /users/jac 时，组件不会经历销毁重建（复用，高效），这意味着组件的生命周期钩子不会被调用。但路由信息对象的route.params.username属性会响应URL的变化，故可以监听该属性来实现某些需要。
3.3路由命名
创建一个路由时，可选择给路由一个 唯一的name，然后可使用 name 代替 path 来传递
routes: [{ path: '/user/:userId',name: 'user',component: User}
]
// 使用命名路由进行导航
router.push({ name: 'user', params: { userId: 123 }})// 在模板中使用命名路由生成链接
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户</router-link>
3.4路由重定向
当用户访问某个路由地址时，可通过redirect使用户重定向访问到另一个地址。常用于防止当路由地址为 /时什么也不显示，让网页默认显示首页
// 当用户访问 / 时 会通过redirect属性重定向到 /home：
const routes = [{ path: '/', redirect: '/home' }，//重定向的目标也可以是一个命名的路由：{ path: '/', redirect: { name: 'homepage' },{ path: "/home", component: Home ，name:'homepage'},
]3.5路由嵌套
通过路由实现组件的嵌套展示，叫做嵌套路由。
比如，下面的About组件中还有TAB1和TAB2两个需要路由控制的组件
在About组件中声明路由链接和出口
//About.vue组件
<!-- 声明子路由链接 -->
<router-link to="/about/tab1">TAB1</router-link>
<router-link to="/about/tab2">TAB2</router-link><!-- 声明子路由占位符 -->
<router-view></router-view>在路由封装的模块中使用chiildren属性声明子路由规则
const routes = [{path: "/about",component: About,children: [{// 当 /about/tab1 匹配成功TAB1将被渲染到 About 的 <router-view> 内部path: "tab1",component: TAB1,},{ // .........path: "tab2",component: TAB2,}]}] 注意：子路由的 path 不需要加 /
3.6命名视图
有时候需要同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。它可以让我们拥有多个
....
//定义命名视图
routes: [{path: '/',components: {header: Header,default: Home,sidebar: Sidebar},},{path:'/user'component:User}],
....
<!-- 定义路由出口 -->
<div id="app"><router-view name="header"></router-view><router-view></router-view><router-view name="sidebar"></router-view>
</div>如果 router-view 没有设置名字，那么默认为 default。如上面例子中：当路由地址是 / 时，会同级渲染展示Header，Home， Sidebar三个组件。当路由地址是 /user时，就只会渲染User一个组件。
3.6声明式导航&编程式导航
声明式导航：点击链接跳转路由的方式。如，普通网页中点击 <a> 链接；vue 项目中点击 <router-link>
编程式导航：调用API跳转路由的方式。如，普通网页中调用 location.href 跳转到新页面；vue项目中借助 router 的实例方法，通过编写代码来实现跳转新页面。
获取router实例的方式（先作基础了解） ：
①template模板中直接使用$router访问路由实例
②在script标签中使用 useRouter() 函数来访问路由器实例
<script>
export default {this.$router.push('路径')
}
</script>
//组合式，setup语法糖
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('路径')
</script>
导航方式：
①导航到不同的位置：路由实例（router） 的push方法，router.push(’地址‘)。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。
| 声明式导航 | 编程式导航 |
<router-link :to="..."> | router.push(...) |
当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...)
② 替换当前位置：路由实例（router） 的replace方法，router.replace(’地址‘)。它的类似于push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字 — 取代当前的条目
| 声明式导航 | 编程式导航 |
<router-link :to="..." replace> | router.replace(...) |
③横跨历史：该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)3.7历史记录模式
在前端路由中，history栈在浏览器中是用于存储用户会话历史（即URL地址）的。在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。
hash模式（不利于SEO）
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({history: createWebHashHistory(),routes: [],
})它在内部传递的实际 URL 之前使用了一个哈希字符（#）,如：http://localhost:5173/#/homehttp://localhost:5173/#/home。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中有不好的影响。
Memory 模式（无历史记录）
import { createRouter, createMemoryHistory } from 'vue-router'
const router = createRouter({history: createMemoryHistory(),routes: [],
})Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。但请注意它不会有历史记录，这意味着你无法后退或前进。
HTML5 模式（推荐使用）
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({history: createWebHistory(),routes: [],
})优点：URL美观，如 https://example.com/user/id，利于SEO。具有历史记录
4.进阶用法
4.1导航守卫
导航守卫类似于组件的生命周期钩子函数，会在导航跳转前，后等的特定阶段执行。
4.11全局前置守卫
每次发生路由的导航跳转时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。它常用于为某些路由界面设置访问权限。
//创建路由
const router = createRouter({ ... })
router.beforeEach((to, from, next) => {//...return 参数
})通过 router.beforeEach 注册一个全局前置守卫。回调函数的参数：
- to 将要访问的目标路由信息对象
- from 将要离开的路由信息对象
- next(可选) 是一个函数，调用next()表示放行，允许这次路由导航
return 可以返回的值如下:
- false：取消当前的导航。
- 路由地址：中断当前的导航，并重定向到该地址，如同调用
router.push()，且可以传入诸如replace: true或name: 'home'之类的选项。
通过上面的参数我们可以为路由设置访问权限，如：设置登录访问权限
①return
router.beforeEach(async (to, from) => {if (// 检查用户是否已登录，且❗️ 避免无限重定向!isAuthenticated && to.name !== 'Login') {// 将用户重定向到登录页面return { name: 'Login' }}})②next
router.beforeEach((to, from, next) => {//未登录，if (to.name !== 'Login' && !isAuthenticated) {next({ name: 'Login' }) //重定向到登录页面//next(false) //或直接拒绝本次跳转}else next() //已登录，放行本次导航
})③ 如果多个路由地址需要设置访问权限
router.beforeEach((to, from, next) => {// 要进行导航守卫的路径值const pathArr = ["/home", "/home/users", "/home/rights"];if (pathArr.indexOf(to.path) !== -1) {if (!isAuthenticated) next("/login");else next();} else next();
});4.12全局后置钩子
全局后置钩子和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身，但它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
如下：点击某路由链接时，改变 document.title
...
{ path: 'navigation-guards',component: Navigation,meta: { isAuth: true, title: '导航守卫' },},
...
// 全局后置守卫
router.afterEach((to, from) => {document.title = to.meta.title ||''
})4.13 路由独享的守卫
直接在路由配置上定义 beforeEnter 守卫，与全局的守卫没什么区别，只是作用的范围不同
const routes = [{path: '/users/:id',component: UserDetails,beforeEnter: (to, from) => {// reject the navigationreturn false},},]你也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：
function fn1(to) {...}
function fn2(to) {...}const routes = [{ path: '/users/:id',component: UserDetails,beforeEnter: [fn1, fn2],},{ path: '/about',component: UserDetails,beforeEnter: [fn2],},
]注意：
①beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。②当配合嵌套路由使用时，父路由和子路由都可以使用
beforeEnter。如果放在父级路由上，路由在具有相同父级的子路由之间移动时，它不会被触发。例如：const routes = [{path: '/user',beforeEnter() {},children: [{ path: 'list', component: UserList },{ path: 'details', component: UserDetails },],}, ]③独享路由守卫是没有后置路由守卫的
4.14组件内的守卫
<script>
export default {beforeRouteEnter(to, from) {..},beforeRouteUpdate(to, from) {...},beforeRouteLeave(to, from) {...},
}
</script>//组合式setup语法糖
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteLeave((to, from) => {})
onBeforeRouteUpdate(async (to, from) => {})
</script>- beforeRouteEnter：在渲染该组件的对应路由被验证前调用。注意：不能获取组件实例 `this` ！ 因为当守卫执行时，组件实例还没被创建！
- beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。举例：对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。注意：因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
- beforeRouteLeave：在导航离开渲染该组件的对应路由时调用，与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
4.2路由元信息
有时可能需要将某些信息附加到路由上，如过渡名称、谁可以访问路由等。此时，可以通过路由信息对象的meta属性实现。定义路由时配置 meta 字段：
const routes = [{path: '/posts',component: PostsLayout,children: [{path: 'new',component: PostsNew,meta: { requiresAuth: true },// 只有经过身份验证的用户才能创建帖子},{path: ':id',component: PostsDetailmeta: { requiresAuth: false },// 任何人都可以阅读文章}]}]那么访问这个属性呢？
前置概念： routes 配置中的每个路由对象都被称为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，它可能匹配多个路由记录。
例如，根据上面的路由配置，/posts/new 这个 URL 将会匹配父路由记录 (path: '/posts') 以及子路由记录 (path: 'new')。
一个路由匹配到的所有路由记录会暴露为 route 对象的route.matched 数组。所以我们可以通过遍历这个数组来检查路由记录中的 meta 字段，但是 Vue Router 还提供了一个 route.meta 方法，它是一个非递归合并所有 meta 字段（从父字段到子字段）的方法。
示例：为某些路由设置登录权限
router.beforeEach((to, from) => {// 使用数组的some()方法检查每条路由记录to.matched.some(record => record.meta.requiresAuth)//使用route.meta 方法if (to.meta.requiresAuth && !auth.isLoggedIn()) {// 此路由需要授权，请检查是否已登录，如果没有，则重定向到登录页面return {path: '/login',query: { redirect: to.fullPath },// 保存我们所在的位置，以便以后再来}}})4.3RouterView 插槽
RotuerView 组件暴露了一个插槽，可以用来渲染路由组件：
<router-view v-slot="{ Component }"><component :is="Component" />
</router-view>上面的代码等价于不带插槽的 <router-view />，但是当我们想要获得其他功能时，插槽提供了额外的扩展性。
KeepAlive & Transition
当在处理KeepAlive组件时，我们通常想要保持路由组件活跃，而不是 RouterView 本身。为了实现这个目的，我们可以将 KeepAlive 组件放置在插槽内：
<router-view v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive>
</router-view>类似地，插槽允许我们使用一个 Transition 组件来实现在路由组件之间切换时实现过渡效果
<router-view v-slot="{ Component }"><transition><component :is="Component" /></transition>
</router-view>更多RouterView 插槽使用，参考：RouterView 插槽 | Vue Router (vuejs.org)
若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃
