Hello everyone, I am quick-frozen fish 🐟, a water front 💦, like the garish 💐, continuous sand sculpture 🌲 Welcome friends to add my wechat: Sudongyuer pull you into the group of my public number: front-end quick-frozen fish progress together, looking forward to growing together with everyone

Read this article 🦀

1. Understood the basic process of vUE plug-in development

2. Understand the basic implementation principle of VUe-Router

3. Make one yourselffunctionalmini-vue-router

Mini-vue-router 👉 github.com/sudongyuer/… Welcome to star 🌟 🌟 🌟

Preface 🌵

Vue Router is the official route manager of vue.js. Its deep integration with vue.js core makes building single-page applications a breeze.

Demand analysis

SPA page to achieve URL transformation but browser does not refresh, component switch.

This is done using the browser-provided API History or HashCahnge event

Principle analysis and implementation 👻

Create the mini-vue-Router constructor and the install static function

When vue. Use is used to register a plug-in, vUE first executes the install method of the plug-in function

Initialize the MiniVueRouter constructor

  • Registers the routing table with the routing instance
  • usingVue.utilDeclare a reactive datacurrentMount tomini-vue-routerInstance, of course, the reactive data declaration can be anywhere, declared on the Router instance, for laterrouter-viewMake it easy to use this reactive data
  • monitoringhashchangeEvent to update reactive data as an update occurscurrent

MiniVueRouter binds the static method intall

In the install static method, we do the following

  • Save the Vue constructor instance so that we can use some of the static methods provided by the Vue constructor later
  • usingVue.mixinEnhanced components willmini-vue-routerThe instance is mounted to the prototype of the Vue so that each Vue component instance has access to the Router instance object, thereby accessing the routing table in the instance object, as well as the responsive data mounted to the Router instancecurrent
  • Register two global Vue components router-link router-viewAnd write their render function, where we use our responsive data Current to find the corresponding routing component in the routing table and finish rendering
  • ⚠️ core, in the render function we use the current responsive data, once it changes, then our current component will re-render the render function, everything depends on the responsive data provided by Vue and its dependency collection mechanism

Create a routing table to register routes

  • Use the Vue constructor to registermini-vue-router
  • Mount a routing table to a route and export it

test

Import our mini-vue-Router instance in main.js and mount it to the vue root component for testing

Mini-vue-router Is running properly 🤪

Document writing 📃

After a good library code logic, the most important and document writing 😁, write good-looking easy to understand the document, the library even if done

Mini-vue-router 👉 github.com/sudongyuer/… Welcome to star 🌟 🌟 🌟

Harvest 🍁

Writing this library the biggest harvest to understand the basic principle of VUe-Router, as well as some vUE responsive knowledge, have to sigh, vUE design is really strong ah, especially big too great, also hope to help you read the article through this project to understand the principle of VUe-Router

Mini-vue-router 👉 github.com/sudongyuer/… Welcome to star 🌟 🌟 🌟

Conclusion 🌞

Then I will write a mini-vue-Router 🧚🏾 to end this article. The purpose of this article is actually very simple, which is to summarize and output the daily work, and output something useful to everyone. It is not important whether you like food or not, but love 🔥, and I hope to know more like-minded friends through this article. Welcome to add my friends, sand sculpture, progress together.

Making 🤖 : sudongyu

Personal blog 👨💻: Frozen fish blog

Vx 👦 : sudongyuer

Write in the last

Guys, if you like my words, give 🐟🐟 a thumbs up 👍 or follow ➕ to support me the most.