//routerExample.vue <template> <div> <h1 @click="goBack">App Test</h1> <router-link to="https://www.jb51.net/">foo</router-link> <router-link to="/bar">bar</router-link> <router-view></router-view> </div> </template> <script> export default { methods: { goBack() { console.log(this.$router); window.history.length > 1 ? this.$router.go(-1) : this.$router.push('https://www.jb51.net/') } } } </script> <style lang="less" scoped> </style>
上面的代码中，我们可以直接使用router-link和router-view这两个组件。它们是随着 Vue Router 一起引入的，作为全局组件使用。
这就是一个最简单的 Vue Router 的使用方式。我们下面就来看看，该如何自己实现上面的简单功能，做一个自己的 Vue Router。
一个简单的 Vue Router 实现
看了上面的这个过程，最简单的 Vue Router 应该包括以下实现步骤：
实现 Vue 规定的插件的写法，将我们自己的Vue Router 作为插件引入 Vue 系统中。
router功能一：解析传入的routes选项，以备调用
router功能二：监控URL变化（两种路由方式：history、hash）
实现两个全局组件：router-link和router-view
看看自定义的 Vue Router 的实现：
//FVueRouter.js let Vue; //保存 Vue 构造函数的引用，与 Vue 深度绑定 class FVueRouter { constructor(options){ this.$options = options; //保存路由的路径与路由组件的对应关系 this.routerMap = {}; //当前的URL必须是响应式的，使用一个新的 Vue 实例来实现响应式功能 this.app = new Vue({ data: {current : "https://www.jb51.net/"} }) } init(){ //监听路由事件 this.bindEvents(); //解析传入的routes this.createRouterMap(); //全局组件的声明 this.initComponent(); } bindEvents(){ window.addEventListener('hashchange', this.onHashChange.bind(this)); } onHashChange(){ this.app.current = window.location.hash.slice(1) || 'https://www.jb51.net/'; } createRouterMap(){ this.$options.routes.forEach(route => { this.routerMap[route.path] = route; }) } initComponent() { // 形式：<router-link to="https://www.jb51.net/"> 转换目标=> <a href="#/" >xxx</a> Vue.component("router-link", { props: { to: String, }, render(h) { // h(tag, data, children) return h('a', { attrs: {href: '#' + this.to} }, [this.$slots.default]) }, }); // 获取path对应的Component将它渲染出来 Vue.component("router-view", { render: (h) => { //此处的this 能够正确指向 FVouter内部，是因为箭头函数 const Component = this.routerMap[this.app.current].component; return h(Component) } }) } } // 所有的插件都需要实现install 方法，传入参数是Vue的构造函数 FVueRouter.install = function(_Vue){ //将Vue的构造函数保存起来 Vue = _Vue; //实现一个混入操作的原因，插件的install阶段非常早，此时并没有Vue实例 //因此，使用mixin，延迟对应操作到Vue实例构建的过程中来执行。 Vue.mixin({ beforeCreate(){ //获取到Router的实例，并将其挂载在原型上 if(this.$options.router){ //根组件beforeCreate时只执行一次 Vue.prototype.$router = this.$options.router; this.init(); } } }) } export default FVueRouter;
这里是最为简单的一种实现。有几个值得注意的点：
如上代码，将最基本的一个Vue Router 的代码架子搭建起来了，能够运行。但细微处依然需要酌情考虑。
关于插件的写法：自定义插件内部必须实现一个 install 方法，传入参数是Vue的构造函数。
使用了一个新的Vue 实例，将 URL 的 hash 变量进行数据响应化处理。
关于渲染函数 render 的参数 h，它实际上是 createElement 函数。具体用法值得深究。代码中使用的是最为简单的处理方式。
结尾
在本文中，我们讲解了 前端路由常见的两种模式：Hash 模式与 History 模式。同时，我们尝试自己实现了一个最为简单的 Vue Router。更多相关的 Vue Router 的细节，可以参考其官网。希望本文对你有用。
到此这篇关于Vue Router的手写实现方法实现的文章就介绍到这了,更多相关Vue Router手写内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: