一文搞定vue-router实现原理

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实现原理

原文地址:https://www.cnblogs.com/art-poet/p/12191293.html

时间: 2024-10-08 03:26:11

一文搞定vue-router实现原理的相关文章

来吧!一文彻底搞定Vue组件!

作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子组件事件通信,和遇到非父子组件事件通信如何处理. 组件类型又是什么鬼 自定义组件双向绑定v-model,动态组件,又是如何称为动态的,为啥是动态呢,递归组件,如何理解递归. Vue组件的了解 Vue的理解,可以找我上一篇vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础,组件是什么,

一篇搞定vue请求和跨域

vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基本Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护 axios发送AJAX请求 安装axios npm install axios -S 基本用法 axios([options]) axios.get(url[,options])  传参方式:1.通过url 传参   2.通过params选项传参 axios.p

一文搞定十大经典排序算法(Java实现)

本文总结十大经典排序算法及变形,并提供Java实现. 参考文章: 十大经典排序算法总结(Java语言实现) 快速排序算法—左右指针法,挖坑法,前后指针法,递归和非递归 快速排序及优化(三路划分等) 一.排序算法概述 1.定义 将杂乱无章的数据元素,通过一定的方法按关键字顺序排列的过程叫做排序. 2.分类 十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此称为非线性时间比较类排序. 线性时间非比较类排序:不通过比较

【搞定Java集合类】原理

HashMap 的工作原理是什么? 我们知道在 Java 中最常用的两种结构是数组和模拟指针(引用),几乎所有的数据结构都可以利用这两种来组合实现,HashMap 也是如此.实际上 HashMap 是一个**“链表散列”**. HashMap 是基于 hashing 的原理. 我们使用 #put(key, value) 方法来存储对象到 HashMap 中,使用 get(key) 方法从 HashMap 中获取对象. 当我们给 #put(key, value) 方法传递键和值时,我们先对键调用 

一文搞定Go语言开发环境的搭建

文章首发自公众号:Go编程时光 <Go编程时光>,一个能带你学习 Go 语言的专栏,同时欢迎搜索我的同名公众号[Go编程时光](排版精美更适合阅读),第一时间获取Go语言干货. 1. 下载安装 Go语言 下载地址:https://golang.google.cn/dl/ 下载完成后,直接双击 msi 文件进行安装,我习惯将软件安装在我的 E 盘下的 Program Files 目录下 后面就是一路点击 Next 即可,直到出现如下界面,安装完成. 2. 配置 Goland 环境 学习编程语言,

一文搞定Python垃圾回收机制

python作为一门解释型语言,以代码简洁易懂著称.我们可以直接对名称赋值,而不必声明类型.名称类型的确定.内存空间的分配与释放都是由python解释器在运行时进行的.python这一自动管理内存功能极大的减小了程序员负担,这也是成就python自身的重要原因之一.所以,这一篇文章我们就聊一聊python的内存管理. 引用计数 Python中,主要通过引用计数(Reference Counting)进行垃圾回收. Copy 1234 typedef struct_object { int ob_

一文搞定前端 Jenkins 自动化部署

最近在公司租项目的过程当中遇到一些 问题,项目做问你后需要部署到服务器环境:目前我再前端开发中常用的 方法又两种: 1:传统的方法 :Linux Xshell xftp来收到打包项目,上传到服务器环境进行部署 2:配置Nginx 环境和Jenkins部署环境再进行命令来自动晚上部署(这篇文章是下载Nginx 安装 Jenkins 做配置来部署服务器) 由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,Git 配置基本一致,后面也介

一文搞定PGA_LGA_BGA

概述 什么是LGA.PGA.BGA类型的封装?众所周知,CPU封装的类型主要为三种:LGA,PGA,BGA,其中LGA封装是最常见的,intel处理器都是采用这种类型的封装,而PGA封装则是AMD常用的一种封装类型. PGA的全称叫做“pin grid array”,或者叫“插针网格阵列封装”.针脚在CPU上. LGA的全称叫做“land grid array”,或者叫“平面网格阵列封装”.针脚在PCB插座上. BGA的全称叫做“ball grid array”,或者叫“球柵网格阵列封装”.无针

jenkins安装配置一文搞定

1 .前置准备 安装java 配置JAVA_HOME安装git安装maven安装tomcat 2.安装jenkins 本文安装jenkins采用war的方式,war包下载地址:https://jenkins.io/zh/download/ 只需要将下载的jenkins.war放到tomcat下面,启动tomcat后,访问http://localhost:8080/jenkins 即可 首次进入会让配置插件(跳过),管理员等信息: 3.安装插件提速 mac找到 /Users/didi/.jenki