RouterView

1、hash 模式

前端路由就是匹配不同的 URL 路径，进行解析，然后动态地渲染出区域 HTML 内容。但是这样存在URL 每次变化都会造成页面的刷新。

在 2014 年之前，大家是通过 hash 来实现前端路由，URL hash 中的 # 就是类似于下面代码中的这种 # ：
http://www.xxx.com/#/login

之后，在进行页面跳转的操作时，hash 值的变化并不会导致浏览器页面的刷新，只是会触发 hashchange 事件。在下面的代码中，通过对 hashchange 事件的监听，我们就可以在 fn 函数内部进行动态地页面切换。

window.addEventListener('hashchange',fn)

2、history 模式

2014 年之后HTML5 标准发布多了两个 API：pushState 和 replaceState。我们可以改变 URL 地址，并且浏览器不会向后端发送请求，我们就能用另外一种方式实现前端路由 **。

在下面我们监听了 popstate 事件，可以监听到通过 pushState 修改路由的变化。并且在 fn 函数中，我们实现了页面的更新操作。
window.addEventListener('popstate', fn)


import {ref,inject} from 'vue'
const ROUTER_KEY = '__router__'function createRouter(options){return new Router(options)
}function useRouter(){return inject(ROUTER_KEY)
}
function createWebHashHistory(){function bindEvents(fn){window.addEventListener('hashchange',fn)}return {bindEvents,url:window.location.hash.slice(1) || '/'}
}
class Router{constructor(options){this.history = options.historythis.routes = options.routesthis.current = ref(this.history.url)this.history.bindEvents(()=>{this.current.value = window.location.hash.slice(1)})}install(app){app.provide(ROUTER_KEY,this)}
}export {createRouter,createWebHashHistory,useRouter}

src/router/index.js


import {createRouter,createWebHashHistory,
} from './grouter/index'
const router = createRouter({history: createWebHashHistory(),routes
})

RouterView.vue

我们首先使用 useRouter 获取当前路由的实例；然后通过当前的路由，也就是 router.current.value 的值，在用户路由配置 route 中计算出匹配的组件；最后通过计算属性返回 comp 变量，在 template 内部使用 component 组件动态渲染。


<template><component :is="comp"></component>
</template>
<script setup>import {computed } from 'vue'
import { useRouter } from '../grouter/index'let router = useRouter()const comp = computed(()=>{const route = router.routes.find((route) => route.path === router.current.value)return route?route.component : null
})
</script>

RouterILink.vue


<template><a :href="'#'+props.to"><slot /></a>
</template><script setup>
import {defineProps} from 'vue'
let props = defineProps({to:{type:String,required:true}
})</script>

手写 vue-router相关推荐

Vue 源码之手写Vue Router
Vue 源码之手写Vue Router 源码地址:https://github.com/CONOR007/Handwritten-routing 一.Vue Router的两种模式 hash模式实现原 ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
vue 多点触控手势_手写 Vue 手势组件__Vue.js
前言最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作. 项目与效果预览思路直接在 DOM 上绑定 touchstart .touch ...
(精华2020年5月17日更新) vue实战篇手写vue底层源码
MYvue.js 主要作用监听属性变化 class MYvue {constructor(options) {this.$options = options;this.$data = options. ...
html手写vue多级选择框,vue + html 编写仿element select 多选组件
现在做vue项目主要用的ui框架差不多都是elementui,但是每个项目设计的不同难免和element组件产生差异甚至是大不相同,有的时候差异少比如页面样式不太相同,功能使用完全一样的话,这样改改样 ...
手写Vue 的双向数据绑定
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理. 本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希 ...
手写vue的v-if和v-show
文件分为html文件和js文件下面贴出代码块: html文件: <!DOCTYPE html> <html lang="en">Ï <head> ...
html手写vue多级选择框,vue多级多选菜单组件开发
本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表点击父标题栏的勾选图标可以全选或取消子列表 ...
从零开始手写vue项目的webpack基础配置
一.创建目录结构执行yarn init, 生成package.json文件; 1.写入文件建立目录结构可参考vue项目目录结构: 首先建立一个src文件夹,其中包含index.html,App.v ...
Vue源码分析-手写Vue（简易版）
1.Vue双向绑定/MVVM响应式原理/v-model的原理 vue.js通过数据劫持结合发布订阅者模式,通过Object.defineProperty来劫持各个属性的setter,getter,在数 ...

手写 vue-router

RouterView

1、hash 模式

2、history 模式

手写 vue-router相关推荐

最新文章

热门文章