Vue-Router 一. 前言二. 对SPA应用的理解三. 后端路由和前端路由四. 项目中路由基本使用五. 路由传参六. 路由守卫七. history模式和hash模式的区别

一. 前言

说到路由，大家都会第一时间想到上图生活中的路由器；可以看到路由器上有几个网线口，每个网线口连接着一台电脑；

我们可将路由器的网线口看作key值，连接的电脑看作value值，每一个key对应着一个value，这就是路由；路由就是一种对应关系；

而多个路由（route）是由路由器（router）管理的，这就是两者的关系；

生活中的路由器就是为了实现多台设备可以共同上网，那我们编程中的路由呢，其实它们都是符合以下两点：

路由就是一组key–valued的对应关系多个路由需要经过路由器管理

上图就是前端编程路由跳转的规则，点击导航根据路径跳转到对应的组件；也是一种映射关系，多个路由的映射关系由前端路由器统一管理配置；

二. 对SPA应用的理解

编程中的路由是为了实现SPA（single page web application）应用（单页面应用）；

单页面应用就像vue和react只有一个html页面，页面和局部内容改变通过路由跳转完成；多页面应用就是多个html页面，经过点击链接跳转到对应的html页面；

对SPA（单页面应用）的理解：

单页面应用整个应用只有一个完整的页面index.html点击页面中的导航不会刷新页面，只会也页面局部更新数据需要通过ajax请求获取 三. 后端路由和前端路由

前面说过关于路由的概念：

一个路由就是一组映射关系；Key为路径，value可能就是一个函数或者组件

官方是这样定义的：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：嵌套路由映射，动态路由选择，模块化、基于组件的路由配置…

上面为什么说key路径对应的value有可能是一个函数，因为路由也 前端和后端之分；

后端路由：

value是funtion，用于处理客户端提交的请求服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

value是component，用于显示页面内容当浏览器路径发生变化时，对应的组件就会显示 四. 项目中路由基本使用

路由的基本使用，其实官方介绍的很详细；这里注意一下，vue2.x版本使用路由V3.x版本，vue3.x版本使用路由V4.x版本；

如果你在最初创建项目的时候，选择一起安装vue-router的话，项目代码也就配置好了，下面我们来手动安装配置一下；（以vue3项目为例）

首先，在项目中安装vue-router

npm install vue-router@4

其次，在src文件夹下面创建一个router文件夹，并在其下创建index.js

import { createRouter, createWebHashHistory } from 'vue-router' import Login from '../views/Login.vue' const routes = [ { path: '/login', component: Login }, { path: '/home', component: () => import('../views/index.vue'), } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router

然后，在main.js里面注册路由

import {createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router)

最后，在项目组件中添加 < router-view /> 视图

<template> <div class="app"> <!-- 一级路由视图 --> <router-view /> </div> </template>

路由可以多层嵌套，这里就不多讲啦，具体可以查看官网中的嵌套路由的具体讲解；

五. 路由传参 < router-link >标签传参

前面我写过专门的介绍，可点击vue中路由传参方式之一（router-link 进行页面按钮式路由跳转传参）查看；

编程式路由传参

前面我写过专门的介绍，可点击vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）查看；

六. 路由守卫

全局路由守卫

beforeEach( (to,from,next) => {}) — 在初始化和路由切换之前调用afterEach((to,from) => {}) — 在初始化和路由切换之后调用

项目中可以利用beforeEach全局前置路由守卫来做权限路由访问

独享路由守卫

beforeEnter(to, from，next) — 某个路由独享的，只有进去之前 const routes = [ { path: '/home', component: () => import('../views/index.vue'), beforeEnter: (to, from，next) => { //符合权限的可以进去该单个路由 ... }, }, ]

组件路由守卫

beforeRouteEnter(to,from,next)beforeRouteUpdate(to,from,next)beforeRouteLeave(to,from,next) beforeRouteEnter(to, from，next) { //通过路由规则，进入该组件时被调用 // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ！ // 因为当守卫执行时，组件实例还没被创建！ }, beforeRouteUpdate(to, from,next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候， // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this` }, beforeRouteLeave(to, from) { //通过路由规则，离开该组件时被调用 // 在导航离开渲染该组件的对应路由时调用 // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this` }, 七. history模式和hash模式的区别

对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

hash模式和history模式的不同：

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://·/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://·，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://·/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。