vue-router的原理？我们来手撸一个vue-router！

前言

在使用vue全家桶进行开发时候，其中一个重要的插件就是vue-router，vue-router功能强大，并且使用方便，是我们构建项目时候不可或缺的一部分，那么vue-router到底是怎么实现的呢？那我们从源码出发，手撸一个基础的vue-router

基础用法

首先我们先看一下在项目中我们是如何使用router的

• router文件
  在项目中我们通常都会有一个router文件夹在存放我们的router文件

      // src/router/index.js
      import Vue from'vue';
      import VueRouter from 'vue-router';
      import Page1 from'@/pages/detail1';
      import Page2 from'@/pages/detail2';
      
      // 创建VurRouter的插件
      Vue.use(VueRouter);
      
      // 配置router
      let router = [
          {
              path: '/',
              components: Page1,
          },
          {
              path: '/page2',
              components: Page2,
          }
      ]
      
      // 实例化VurRouter，并将配置注入，导出实例
      const Router = new VueRouter(router);
      
      export default Router;

• vue根实例文件
  在实例化和挂载vue根实例的时候，我们会将vue-router引入到配置项

      // src/main.js
      
      import Vue from 'vue';
      import App from './App.vue';
      import router from './router';
      
      new Vue({
          router,
          render: h => h(App),
      }).$mount('#app')

• 使用路由
  利用路由提供的组件，我们可以按照我们的需求展示和跳转路由