封装一个基础的vue-router

前言
主要知识点：

路由原理
Hash与History
实现路由

一、一个vue路由的工作原理
前端路由与后端路由的区别：

后端路由：
输入url>请求发送到服务器>服务器解析请求的路径>拿取对应的页面>返回回去
前端路由：
输入url>js解析地址>找到对应的地址的页面>执行页面生成的js>看到页面
vue-router工作流程

二、Hash与history的使用

hash:

#号后的就是hash的内容
可以通过location.hash拿到
可以通过onhashchange监听hash的改变
可以在#号后面加路径不会向服务器请求

 

history:

history即正常的路径
location.pathname
可以用onpopstate监听history变化

 

三、Vue插件基础知识

如：vue-router、vuex、element-ui都是插件

插件基础点：

Vue.use去使用一个插件，并且去执行install方法
Vue.mixin往vue的全局混入自定义的操作
可以通过this.$options拿到new Vue时的参数

 

示例：

以下都是在main.js执行

1、初始Vue.use()

Vue.use({
console.log(‘use’) //会打印出use
})

2、install属性

let a = function() {
console.log(a)
}
//或 let a ={}
a.install=function(){
console.log(‘install’)
}
Vue.use(a) // 会打印install，而不会打印a。
// 如果你给他一个方法，他就执行这个方法，
// 但是无论你给他的任何东西，只要给他一个install属性，他就会执行install。

3、Vue.mixin()

let a = function() {
console.log(a)
}
//或 let a ={}
a.install=function(vue){
// Vue.mixin 全局混入自定义操作。上面的vue是作为参数传进来的，而不是import Vue from 'vue’中的Vue
vue.mixin({
data () {
return {
c:123456 // 在其他页面this.c
}
},
methods:{
globalMethods(){
console.log(‘我是全局方法’) // 在其它页面this.globalMethods()
}
},
created() {
console.log(this)
}
})
}
Vue.use(a)

4、Vue工具类（Vue.util）
vue 工具类: defineReactive、extend、mergeOptions、warn

let obj = {
key:‘KEY’
}
setTimeout(function () {
obj.key=‘KEY2’ // 3s改变{{this.obj1.key}}
},3000)

let a = function() {
console.log(a)
}
//或 let a ={}
a.install=function(vue){
console.log(vue.util) // vue 工具类: defineReactive、extend、mergeOptions、warn
vue.util.defineReactive(obj,‘key’) // 监听。源码使用的是Object.defineProperty()
vue.mixin({
beforeCreate(){
this.obj1=obj //在其他页面{{this.obj1.key}}，值为KEY。
}
})
}

vue.extend() 与 vue.util.extend() 区别：

vue.extend() // 单元测试
const home = Vue.extend(home)
// 新建这个组件的构造函数，也就是组件的this
const vm = new home().$mount()
vue.util.extend() // 浅拷贝对象

 

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119251296