一文搞定vue-router实现原理

Posted 2020-11-24 art-poet

vue-router是什么？

首先我们需要知道vue-router是什么，它是干什么的？

这里指的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。替换，vue-router就是WebApp的链接路径管理系统。

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页应用。

那与传统的页面加快有什么区别呢？

1.vue的单页面应用是基于路由和组件的，路由用于设置访问路径，转换路径和组件映射起来。

2.传统的页面应用，是用一些超链接来实现页面切换和替换的。

在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起URL和页面之间的映射关系。

因为为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，必须使用vue-router来进行管理。

作者：DIVI
链接：https://juejin.im/post/5bc6eb875188255c9c755df2
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

vue-router实现原理

SPA（单页应用程序）：单个页面应用程序，有且只有一个完整的页面；当它在加载页面的时候，不会加载整个页面的内容，而只更新一个指定的容器中内容。

单页应用（SPA）的核心之一是：

1.更新视图而不重新请求页面;

2.vue-router在实现单页前端路由时，提供了一种方式：hash模式，history模式，abstract模式，根据模式参数来决定采用哪种方式。

路由模式

vue-router提供了三种运行模式：

●hash：使用URL哈希值来作路由。

●history：依赖HTML5历史记录API和服务器配置。查看HTML5历史记录模式。

●abstract：支持所有javascript运行环境，如Node.js服务器端。

 

Hash模式

hash即浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。
也就是说

• 即#是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中，不包含#。
• 每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置。

所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。

History模式

HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面；

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history‘",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

//main.js文件中
const router = new VueRouter({
  mode: ‘history‘,
  routes: [...]
})

有时，history模式下也会出问题：
eg:
hash模式下：xxx.com/#/id=5 请求地址为 xxx.com,没有问题。
history模式下：xxx.com/id=5 请求地址为 xxx.com/id=5，如果后端没有对应的路由处理，就会返回404错误；

为了应对这种情况，需要后台配置支持：
在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

此处就设置如果URL输入错误或者是URL匹配不到任何静态资源，就自动跳到到首页。

abstract模式

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。
根据平台差异可以看出，在 Weex 环境中只支持使用 abstract 模式。 不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进入 abstract 模式，所以 在使用 vue-router 时只要不写 mode 配置即可，默认会在浏览器环境中使用 hash 模式，在移动端原生环境中使用 abstract 模式。 （当然，你也可以明确指定在所有情况下都使用 abstract 模式）。

 

vue-router使用方式

1：下载 npm i vue-router -S

** 2：在main.js中约会**从‘vue-router‘导入VueRouter;

3：安装插件 Vue.use（VueRouter）;

4：创建路由对象并配置路由规则

let router = new VueRouter（{routes：[{path：‘/ home‘，component：Home}]}）;

5：将其路由对象传递给Vue的实例，选项中加入router：router

6：在app.vue中留坑

<router-view></router-view>

具体实现请看如下代码：

//main.js文件中引入
import Vue from ‘vue‘;
import VueRouter from ‘vue-router‘;
//主体
import App from ‘./components/app.vue‘;
import index from ‘./components/index.vue‘
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
    routes: [
        //一个个对象
        { path: ‘/index‘, component: index }
    ]
});
//new Vue 启动
new Vue({
    el: ‘#app‘,
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

最后记得在app.vue中“留坑”

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>

 

参考文章：vue-router实现原理