Vue3 _ 22. Vue Router 4.0 基本使用

一、什么是 Router

打开 Vue Router 官网：https://next.router.vuejs.org/

可以看到，这个 Router 是 Vue 官方使用的路由，是和 Vue.js 核心深度集成。

我们之前也说过，我们以后是前后端分离式开发，分离后页面的跳转是交给前端本身去控制，而这个 Router 就是这一套控制的集成。

二、安装

我们想要使用这个 Router，首先要引入一下 Router。

npm install vue-router@4

当然，这个我们其实在创建项目的时候已经引入了这个 Router。来看一下

并且 Vue 已经帮我们把这个 router 加载到全局了。所以这个安装是给没有安装 Router 的项目去使用的~~~

三、配置文件讲解

首先是 main.js

我们在 main.js 中引入 router，然后使用 use() 方法将这个 router 注册到整个 Vue 实例中。

然后是路由的配置文件 router/index.js

首先看这两个 import，这个是引入我们的路由还有 App 这个页面。

下面定义了一个 routers，注意，这个是一个数组，我们到时候会在这里配置好多个路由地址，这里我们只配置了一个非常简单的 App 页面（这也就是为啥我们启动项目后，就可以直接看到我们的 App.vue ~）

然后是 router，这个里面我们使用了 history 的模式，这个接触过之前的 vue2 的项目的人可能知道，之前项目并不是这种 history，而是使用的 hash 模式。我们来看一下

hash 模式

history 模式

  

前端路由的核心就是：改变视图的同时，不会向后端发出请求。

为了达到这种目的，浏览器本身提供了两种支持，也就是我们上面看到的 hash 和 history，来看看这两种有啥不同

hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

这里 Vue 的建议是让我们使用 history 这种模式，具体为啥大家可以自己下去研究。

四、使用

我们这里先创建两个个页面

页面有了，我们这里先来配置一下 router/index.js

其实很简单，首先我们把两个页面引入进来，然后将这两个页面配置到和 App 同一级即可。

接着我们去 App.vue 下。我们在这里写两个 router-link

我们来看官网对 router-link 的介绍

写完这个 router-link 还不够，我们还需要定义一个 router-view 

这个 router-view 同样去看官网解释

写完之后，我们从新启动项目

五、测试

可以看到，刚打开的时候你也许吓一大跳，为啥会有两个一模一样的 App.vue

这里我要解释一下为啥会出现第二个 App.vue。原因是因为：<router-view></router-view>

这里我们是请求的：/，路由拿到这个请求之后，会根据我们配置的 router/index.js 去寻找我们的请求地址所对应的页面，很明显，我们配置的根请求就是 App.vue

所以呢，我们的 router-view 就会将整个 App.vue 再次加载出来，所以除去本身，我们还有一个是路由帮我们加载的。（我们下面会去说这个怎么去解决）

我们先来点击一下上面的 router-link。

可以看到啊，这个是 OK 的。

六、router 配置默认页面

接着我们来说一下我们上面的那个问题。

这里我们可以将 / 根请求做一次重定向，直接重定向到 /hello-router1，这样的话，我们就不会出现第二次加载 App.vue 了。

我们使用 redirect 直接进行重定向即可，然后保存，我们再来请求 http://localhost:8080

ok 的啊

最后，再来说一个问题，我们上面配置了根请求，然后做了重定向，那么我们第一次加载页面的时候是怎么加载的，按道理来说不会出现才对。

这里解释一下，我们第一次加载页面靠的不是这个路由，而是我们 main.js 中的挂载配置。来看一下

即使我们在路由中将 App 的那段路由代码删除了，同样也是可以访问的。可以自己去尝试一下~~~

这一篇东西有点多，自己动手练习一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~