搞懂Vue-Router的概念和使用，看完这篇文章就够了

• 五. 路由传参

• 六. 路由守卫

• 七. 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请求获取

三. 后端路由和前端路由

===========================================================================

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

1. 一个路由就是一组映射关系；

2. 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 /> 视图

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。