# 插件编写的基本方法推荐大家先看看官方给出的插件使用和开发方法 [https://vuejs.bootcss.com/guide/plugins.html](https://vuejs.bootcss.com/guide/plugins.html) # 需求分析 ## 我们先看看`vue-router`的使用步骤使用官方的vue脚手架初始化的项目中，我们来看看下面两个文件： **src/router/index.js** ```javascript import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/Home.vue"; Vue.use(VueRouter); // 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: "hash", routes, }); export default router; ``` **src/main.js** ```javascript import Vue from "vue"; import App from "./App.vue"; import router from "./router"; Vue.config.productionTip = false; new Vue({ router, render: (h) => h(App), }).$mount("#app"); ``` ## vue-router的调用顺序 1. use `Vue.use(VueRouter)` **注意⚠️：** `Vue.use()`主要是调用插件内部的install方法，并将Vue实例作为参数传入 2. new 一个router实例 ```javascript const router = new VueRouter({ // 实例化router传入的参数 mode: 'history', base: process.env.BASE_URL, routes }) ``` 3. new Vue() ，把实例放在vue的配置项里面 ```javascript new Vue({ router, // 注意router的实例也往里传 render: h => h(App) }).$mount('#app') ``` 4. 使用路由组件``、``或者在组件中使用`this.$router` ## 由此我们看看vue-router内部做了什么？ 1. 将$router挂载到全局上 1. 实现并声明了两个组件：``、`` ## # 实现思路 ## 首先我们看看如何将`$router`挂载到组件上 ```javascript let Vue; // 保存vue的构造函数，避免打包将其打进去 VueRouter.install = function (_Vue) { Vue = _Vue; console.log("options", Vue.$options); Vue.mixin({ beforeCreate() { console.log("inner", this); console.log(" this.$options.router", this.$options.router); if (this.$options.router) { Vue.prototype.$router = this.$options.router; } }, }); console.log("end"); }; ``` ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c7c81be0fcf434db085f4010a0d04ab~tplv-k3u1fbpfcp-zoom-1.image) 可以看到： 1、第一次执行的时候，即在Vue.use(Router)时，还没有实例化vue（因为`Vue.use() `发生在 `new Vue()`之前），所以**Vue.$option**本身是拿不到的（**ps:** option就是`new Vue()`时传入的参数，router也往里面传），此时既然拿不到router的实例，所以**不能直接在install方法里面挂载；** 2、我们可以在use的时候做一个全局混入，在合适的时间点，获取到Vue根实例配置项中的router实例，执行挂载。紧接着在new Vue()根实例创建的时候，因为注入了router实例，所以再执行全局混入(mixin)中的生命周期时，这个时候根实例的配置项`this.$options`已经包含了router实例，可以此时把router挂载到Vue的原型上。之后所有Vue实例扩展来的VueCompont都可以通过`this.$router`访问到这个属性 ## 为什么要定义一个局部vue 这里我再解释一下第一行代码；因为我们要在这个router类里面用到Vue的实例，按照最简单的想法，当然就是直接把vue引入进来用；但是这样我们打包发布的时候，就包含了vue的包; 一个vue的插件包含了vue的包，是不是很奇怪；所以我们创建一个局部变量，在`Vue.use()`的时候，第一个参数传入的就是vue的实例,此时我们将这个实例复赋值给我们的局部变量，就完成了我们的目的： **既可以调用vue实例，又不会将其打包；** **所以这也是我们在调用很多插件时，必须先use的原因之一吧（还有一个原因，就是挂载实例）；** **** **比如：vuex,你new store()之前也得先use；用来挂在实例和保存vue实例** ## 如何实现那两个路由组件先看看路由组件如何使用 ```html

Home | About

``` 由上面可以看出，点击`router-link`，就相当于点了a标签，然后a标签的href属性控制页面路由发生了变化；监听路由变化，然后仔router-view里面输出不同的模板； ### 而路由变化有两种方式 #### hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题 **hash模式示例**: [http://localhost:8080/#/home](https://link.juejin.cn?target=http%3A%2F%2Flocalhost%3A8080%2F%23%2Fhome) [http://localhost:8080/#/user](https://link.juejin.cn?target=http%3A%2F%2Flocalhost%3A8080%2F%23%2Fuser) [hash详解](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/hashchange_event): hashChange #### history模式：美化后的hash模式，路径中**不包含“#”**。依赖于Html5 的** history api** 由于改变了地址, 刷新时会按照修改后的地址请求后端, **需要后端配置处理, 将地址访问做映射**, 否则会404; **history模式示例**: [http://localhost:8080/home](https://link.juejin.cn?target=http%3A%2F%2Flocalhost%3A8080%2Fhome) [http://localhost:8080/user](https://link.juejin.cn?target=http%3A%2F%2Flocalhost%3A8080%2Fuser) [history 监听路由](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event): popState, pushState() history模式监听路由分两种情况，一种是直接监听popstate事件刷新页面组件，这个只适合网页首次访问、浏览器的前进和后退的情况，因为history.pushState()或history.replaceState()不会触发popstate事件。另一种就是通过router.push、router.replace来改变url地址，这时候，在这两个api的内部实际上也分了两步走： 1. 页面组件更新(即更新router的current属性) 1. 底层调用history.pushState/history.replaceState改变url ### 我们来实现一个简单的hash式的路由变化大伙儿不知道怎么注册全局组件的话，最好先看看下面这个 [组件基础搭建](https://vuejs.bootcss.com/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C) ### 先来看看router-link ```javascript // 注册并且实现两个组件 Vue.component("router-link", { // 有一个必传的to值，即a标签里面的href，用于改变url props: { to: { required: true, }, }, render(h) { return h( "a", { attrs: { href: "#" + this.to }, }, // 默认插槽 this.$slots.default ); }, }); ``` ### 再来看看router-view ```javascript class VueRouter { constructor(options) { // 接受传入的参数 this.$options = options; const initial = "/"; // 将current变成响应式数据， //这样在hashchange的回掉中修改curent时， //用到current的router-view的render函数就会重新渲染 Vue.util.defineReactive(this, "current", initial); // 监听路由变化 window.addEventListener("hashchange", () => { // 获取当前url中的hash this.current = window.location.hash.slice(1); }); } } VueRouter.install = function (_Vue) { Vue = _Vue; Vue.component("router-view", { render(h) { // 获取当前路由所对应的组件，然后把它渲染出来 const { current, $options } = this.$router; // 这里要注意我们传进来的routes是一个路由表，如下图一 // 所以这里我们是找出匹配到当前current路由的项，然后直接渲染组件 const route = $options.routes.find((item) => { return item.path === current; }); let component = route ? route.component : null; return h(component); }, }); } ``` 图一![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7987b85e06fd46539c3332e0eb16d44e~tplv-k3u1fbpfcp-zoom-1.image) # 完整demo代码 ```javascript // 我们要实现什么 // 1、插件 // 2、两个组件 // 保存vue的构造函数，避免打包将其打进去 let Vue; class VueRouter { constructor(options) { this.$options = options; const initial = "/"; Vue.util.defineReactive(this, "current", initial); this.current = "/"; window.addEventListener("hashchange", () => { // 获取当前url中的hash this.current = window.location.hash.slice(1); }); } } // 参数1在Vue.use()调用时传进来， VueRouter.install = function (_Vue) { Vue = _Vue; console.log("options", this); // 全局混入 // 目的：延迟下面的逻辑到 router创建完毕并且附加到选项上时才执行 Vue.mixin({ // 在每个组件创建实例时都会执行 beforeCreate() { // this.$options.router ；即new Vue时放进去的router实例 if (this.$options.router) { Vue.prototype.$router = this.$options.router; } }, }); // 注册并且实现两个组件 Vue.component("router-link", { props: { to: { required: true, }, }, render(h) { return h( "a", { attrs: { href: "#" + this.to }, }, this.$slots.default ); }, }); Vue.component("router-view", { render(h) { // 获取当前路由所对应的组件，然后把它渲染出来 const { current, $options } = this.$router; const route = $options.routes.find((item) => { return item.path === current; }); let component = route ? route.component : null; return h(component); }, }); }; export default VueRouter;