vue-router实现原理及简易demo
自定义路由demo,git地址: git@github.com:xsk-walter/Vue-router.git
一、router基本使用
① 创建和路由相关的组件
②Vue.use(vueRouter)注册插件
③创建路由对象,此时配置路由规则
④注册router对象,vue实例时,选项里配置创建好的router对象
⑤通过router-view,设置占位,路径匹配成功后,组件替换掉占位,router-link创建一些链接
二、Hash和History模式的区别
表现形式
原理:①Hash基于锚点,以及onhashchange事件②History模式是基于HTML5中的History API
- history.pushState()\history.replaceState()
history模式需要服务器支持:在服务端应该除了静态资源外都返回单元应用的index.html
三、VueRouter原理
Hash模式
#
号后的内容作为路径,可以通过location.url改变,如果只是#号后内容改变,不像服务器端发送请求,但会存储到历史记录里,监听hashchange事件,根据当前路由地址找到对应组件重新渲染
History模式
- 通过history.pushState()方法改变地址栏,并把当前地址存储到访问历史中,不向服务发送请求,监听popstate事件,可以得到浏览器的变化,pushstate和replacestate不会触发该事件,当点击浏览器前进和后退按钮时触发或者back和forward方法时。
- 当地址改变之后,根据当前地址找到对应组件重新渲染。
四、类图
类名 VueRouter
属性 options\data\routeMap
方法
①Constructor(options):VueRouter
②_install(Vue):void
③init():void => initEvent():void 、createRouteMap(): void 、initComponents(Vue):void
五、Vue的构建版本
- 运行时版本:不支持template模板,需要打包的时候提前编译
- 完整版:包含运行时和编译器,程序运行时把模板转换成render函数
Vue-Router
一、普通、动态路由传参方式
// 路由代码传参
import About from 'about'
// routes 配置
{
path: '/about/:id', // 动态路由
component: About,
props: true // ①布尔模式
}
{
path: '/about', // 普通路由
component: 'About',
props: { id: 19 } // ②对象模式
}
// 接收方式 props
props;['id'] 或者
props: {
id: { type: Number, default: 12}
}
// ③函数模式
routes:[
{
path: '/about',
component: About,
// props: route => ({id:route.query.id}) // url='/about?id="89"' 或者
props: route => ({id: route.params.id}) // url='/about/:id' => '/about/89'
}
]
二、动态路由:将给定匹配模式的路由映射到同一个组件,复用一个组件,相对与销毁后重建更高效。
Keep-alive包括时,组件的声明周期钩子函数不会被重复调用。
要对同一个组件中参数变化做出响应的话,可以通过watch 侦听$route对象上的任意属性
watch: {
$route: {
immediate: true,
handler(route) {
// 处理事件 对路由变化做出响应
}
}
}
或者使用导航守卫,beforeRouteUpdate,也可以取消导航
三、捕获所有路由或404路由
四、路由的匹配语法
自定义正则 像可以区分 /list/100 和/list/xsk 等路由
- routes: [ { path: '/list/:id(\\d+)'}, {path: '/list/:name'} ]
可以重复的参数 匹配多个部分的路由,可以用 * 号和 +号将参数标记为重复
也可通过使用?号修饰符(0个或1个)将一个参数标记为可选
五、嵌套路由、命名路由
六、编程式导航
声明式()\编程式路由 router.push(...)
Router.push(params):
Params: 字符串路径、路径对象、命名的路由并加上参数、带查询参数、带hash
'/users/detail'
{ path: '/users/detail' }
{ name: 'detail', params: {id: '0'}}
{ path: '/users/detail', query: {id: '0'} }
替换当前位置 router.replace({path: '/users'}) 或者router.push({path:'users', replace: true}); 导航时不会向history添加记录
history.go()横跨历史
七、命名视图:
八、重定向配置
// 通过routes配置来完成
const routes = [{ path: '/home', redirect: '/'}]
// 重定向的目标也可以是一个命名的路由 redirect: { name: 'Details'}
// 一个方法动态返回重定向目标
const routes = [
{
path: '/home/:id',
redirect: to => {
return {path:'Details', query: { q: to.params.searchText}}
}
}
]
// 别名
alias: '/home'
九、路由组件传参 props、$route.query$route.params
布尔模式 routes配置时 props:true设置即可
对象模式 props: { id: '0' } 当props为静态的时候很有用
函数模式 创建一个返回props的函数,允许你将参数转换为其他类型,将静态值与基于路由的值相结合等操作
props: route => ({ query: route.query.id })
props: route => ({ params: route.params.id})
对于命名视图的路由,必须为每个命名视图定义props配置
const routes = [{
path: '/home',
components: { default: Home, sidebar: Sidebar},
props: { default: true, sidebar: true}
}]
十、不同的历史模式
- Hash模式:history: createWebHashHistory() SEO受影响
- HTML5模式:history:createWbeHistory() 如果没有适当的服务器配置,就会404,需要在服务器上添加一个简单的回退路由
进阶
一、导航守卫:vue-router提供的主要是通过跳转或取消的方式守卫导航。
方式:全局、单个路由独享、组件
全局前置守卫:beforeEnter:
- 每个守卫都接收两个__参数__:to\from\next(可选)
- 返回值 ①false:取消当前导航、②一个路由地址:通过一个路由地址跳转到不同的地址,类似于router.push()可配置,当前的 导航被中断然后进行一个新的导航。
- next可选参数
全局后置守卫:afterEach 不接受next函数也不会改变导航本身
全局解析守卫:beforeResolve
路由独享守卫:在routes中配置
组件内的守卫 可用配置API:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
beforeRouteEnter:唯一可传递next回调守卫;解决不可访问this;
next()里的内容执行时机在组件mounted周期之前;
beforeRouteUpdate: 该组件复用时被调用
vue-router实现原理及简易demo的更多相关文章
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...
- Vue Router的原理及history模式源码实现
Hash 模式 URL中 # 后面的内容作为路径地址,可以通过location.url直接切换路由地址,如果只改变了#后面的内容,浏览器不会向服务器请求这个地址,会把这个地址 记录到浏览器的访问历史中 ...
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
随机推荐
- Kali Linux 下安装配置MongoDB数据库 ubuntu 下安装配置MongoDB源码安装数据库
Kali Linux 下安装配置MongoDB数据库 1.下载mongodb.tgz 压缩包: 2.解压到:tar -zxvf mongodb.tgz /usr/local/mongodb 3.创 ...
- c语言实现两数交换的三种方法
实现变量的值互相交换的三种不同方法 方法一:利用第三个变量来实现数值的交换 int tmp; tmp = a; a = b; b = tmp; 此方法直观,简易.不易出错,推荐使用 方法二:利用两个变 ...
- RESTful API/Web API
Microsoft REST API Guidelines Are Not RESTful White House Web API Standards Microsoft REST API Guide ...
- 记离线缓存(manifest)一大坑,断定其只适用于静态网站或离线应用
今天看了离线缓存(manifest)方面的资料,兴冲冲地就想给自己的网站用上.待我把代码都写好部署上服务器,并测试过OK的时候,在SegmentFault刷了一把manifest方面的问答,才发现这个 ...
- DOS控制台
:win+r--cmd--回车* A:d: 回车 盘符切换* B:dir(directory):列出当前目录下的文件以及文件夹* C:cd (change directory)改变指定目录(进入指定目 ...
- vue构建项目步骤
1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...
- 02 | 自己动手,实现C++的智能指针
第一步:针对单独类型的模板 为了完成智能指针首先第一步的想法. class shape_wrapper { public: explicit shape_wrapper( shape* ptr = n ...
- Kafka 使用-安装
Kafka 使用-安装 官方网站 http://kafka.apache.org/ 官方文档 Kafka 是什么? Apache Kafka is an open-source distributed ...
- PostgreSQL常用初级技能树
1.创建表需要id自增 设置serial即可,示例: id serial not null 2.创建表没有设置后面想要再设置自增 给test表设置一个自增序列test_id_seq CREATE SE ...
- 3种方法改变this的指向
<body> <div style="width: 200px;height: 200px;hotpink;"></div> & ...