手写vue路由
一、简易demo
// routes注册
import Vue from "vue";
// import VueRouter from "vue-router";
import VueRouter from "./vueRouter"; // 自定义路由 js
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
const router = new VueRouter({
mode: "history",
routes,
});
export default router;
// vueRouter
var _Vue = null
export default class VueRouter {
// 一、 install方法
static install(Vue) {
// 1、判断插件是否注册
if (VueRouter.install.installed) return
VueRouter.install.installed = true
// 2、将Vue构造函数记录到全局变量
_Vue = Vue
// 3、把创建Vue实例的时候传入的router对象注入到Vue实例上
// _Vue.prototype.$router = this.$options.router;
// 混入
_Vue.mixin({
beforeCreate() {
if (this.$options.router) {
_Vue.prototype.$router = this.$options.router
this.$options.router.init() // ?
}
}
})
}
// 二、构造函数
constructor(options) {
this.options = options
this.routeMap = {}
this.data = _Vue.observable({
current: '/'
})
}
init() {
this.createRouteMap()
this.initComponents(_Vue)
this.initEvent()
}
// 三、createRouteMap
createRouteMap() {
// 遍历所有的路由规则,把路由规则解析成键值对,保存在routeMap中
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component
})
}
// 四、initComponents
initComponents(Vue) {
Vue.component('router-link', {
props: {
to: String
},
// template: '<a :href="to"><slot></slot></a>'
render(h) {
return h(
'a',
{
attrs: {
href: this.to
},
on: {
click: this.clickHandler
}
},
[this.$slots.default]
)
},
methods: {
clickHandler(e) {
history.pushState({}, '', this.to) // 修改地址栏 - 不会发送请求
this.$router.data.current = this.to // 重新加载响应的组件
e.preventDefault() // 阻止发送请求
}
}
})
const self = this
Vue.component('router-view', {
render(h) {
let component = self.routeMap[self.data.current]
return h(component)
}
})
}
// 五、返回按钮、前进按钮问题
initEvent() {
window.addEventListener('popstate', () => {
this.data.current = window.location.pathname
})
}
}
二、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路由的更多相关文章
- 剖析手写Vue,你也可以手写一个MVVM框架
剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
- 手写vue中v-bind:style效果的自定义指令
自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...
- 手写vue双向绑定数据
来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...
- 学习手写vue,理解原理
class Compiler{ constructor(el,vm){ // 判断el属性 是不是 一个元素, 如果不是就获取 this.el = this.isElementNode(el)?el: ...
- 手写vue observe数据劫持
实现代码: class Vue { constructor(options) { //缓存参数 this.$options = options; //需要监听的数据 this.$data = opti ...
- 手写 Vue2 系列 之 编译器
前言 接下来就要正式进入手写 Vue2 系列了.这里不会从零开始,会基于 lyn-vue 直接进行升级,所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x,请先从这篇文章开始,按照顺序进行学习 ...
- 基于vue手写tree插件那点事
目录 iview提供的控件 手写控件 手写控件扩展 手写控件总结 # 加入战队 微信公众号 主题 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对 ...
随机推荐
- cpu指令如何读写硬盘
我们提到cpu的主要作用之一就是控制设备之间的数据交互.这其中自然也包括了硬盘.系统的所有数据基本都在硬盘中,所以知道怎么读写硬盘,对程序来说非常重要,所以我们先来探索下传说中的pio模式. cpu要 ...
- 在VisualStudio调试器中使用内存窗口和查看内存分布
调试模式下内存窗口的使用 在调试期间,"内存"窗口显示应用使用的内存空间.调试器窗口(如"监视"."自动"."局部变量" ...
- 富文本编辑器CKeditor的配置和图片上传,看完不后悔
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...
- APK安装流程概述
pre { background: none left top repeat scroll rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 1); ...
- java中封装encapsulate的概念
封装encapsulate的概念:就是把一部分属性和方法非公有化,从而控制谁可以访问他们. https://blog.csdn.net/qq_44639795/article/details/1018 ...
- title与h1的区别、b与strong的区别、i与em的区别
strong标签有语义,是起到加重语气的效果,而b标签是没有的,b标签只是一个简单加粗标签.b标签之间的字符都设为粗体,strong标签加强字符的语气都是通过粗体来实现的,而搜索引擎更侧重strong ...
- python入门-开始
1.为啥要学Python? 各种语言的优劣势对比视频版:https://www.bilibili.com/video/BV1y3411r7pX/?spm_id_from=autoNext 各种语言的优 ...
- Netty初见-三大组件-简单使用
Netty系列文章目录 Netty初见-三大组件-简单使用 文件编程-更新中---- 目录 Netty系列文章目录 三大组件 Channel与Buffer Selector 简单使用(ByteBuff ...
- 二进制免安装方式,配置mysql
mysql 5.7.22版本 二进制包安装方法 环境标准化采样: 检查系统内是否有其他mysqlrpm -qa | grep mysql 是否存在mysql用户和用户组grep mysql /etc/ ...
- QT类使用记录
QT类使用记录 1.QSharedMemory 提供了对一段共享内存的访问.既提供了被多进程和多线程共享的一段内存的访问.也为单线程或单进程锁定内存以实现互斥访问提供了方法. QSharedMemor ...