封装一个基础的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
封装一个基础的vue-router的更多相关文章
- 60行代码实现一个迷你版Vue Router
这是一个超级精简版的VueRouter,实现hash模式下,hash改变组件切换的功能,原理就是利用了 Vue.js 的响应式机制触发router-view组件的重新渲染. 代码 https://gi ...
- es6 封装一个基础的表单验证
1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- vue Router——基础篇
vue--Router简介 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路 ...
- Vue.use源码分析(转)+如何封装一个组件
封装一个组件:https://www.jianshu.com/p/89a05706917a 我想有过vue开发经验的,对于vue.use并不陌生.当使用vue-resource或vue-router等 ...
- Vue Router基础
路由 安装 vue-router 起步 <router-link to="/foo">Go to Foo</router-link> <router- ...
随机推荐
- linux lvm逻辑卷管理之lvdisplay命令
linux 磁盘管理分fdisk parted 和LVM三种方式,我们这里重点是说lvm 我们来看看LVM基本术语(lvm和传统fdisk分区方式有区别)由于传统的磁盘管理不能对磁盘进行磁盘管理,因此 ...
- DirectX11 With Windows SDK--38 级联阴影映射(CSM)
前言 在31章我们曾经实现过阴影映射,但是受到阴影贴图精度的限制,只能在场景中相当有限的范围内投射阴影.本章我们将以微软提供的例子和博客作为切入点,学习如何解决阴影中出现的Atrifacts: 边缘闪 ...
- Quartz 使用记录
Quartz 使用记录 官网 https://www.quartz-scheduler.org/ 参考文档 Quartz 2.3.0 什么是 Quartz? 官方描述: Quartz is a ric ...
- js模块系统 - amd|cmd|commonjs|esm|umd
写过前端代码大概率听说过amd cmd umd commonjs esm这些名词, 想当初我第一次看到这些的时候, 人都麻了, 都是些啥啊. 后来我知道了, 这些都是js的模块规范. amd - 浏览 ...
- docker基础容器中bash: vi: command not found问题解决
安装即可 1.apt-get update 2.apt-get install vim
- layui下拉框渲染问题,以及回显问题
最近实习公司给的新人练手项目用的layui,layui之前自己也接触过但是也就是用了用table组件,没有用过layer弹层这些东西,所以就了解了一下. 首先遇到的一个问题就是下拉框没有样式,然后加样 ...
- Gitlab图床配置
注意,使用图床,如果文件在外网打开,图片不会正常显示,因为图片存储在内部的Gitlab服务器上 自行搜索Picgo安装配置,需要安装node.js 项目链接:D-W-X/picgo-plugin- ...
- APL 和 Web APL 的概述
APL APl ( Application ProgrammingInterface,应用程序编程接口) 是一些预先定义的函数,目的是提供应用程序 与开发人员基于某软件或硬件得以访问一组例程的能力,而 ...
- git 在 pull 或者合并分支的时候会遇到下图这个界面
可以不管(直接进入 3, 4 步), 如果要输入解释的话就需要 按键盘字母 i 进入 insert 模式 修改最上面那行黄色合并信息,可以不修改 // 黄色内容为默认的合并信息; 按键盘左上角 & ...
- v-show与v-if的一次事故
v-show等同于设置dom元素的display为none,dom元素没有消失而是被隐藏了 v-if是删除或添加dom元素,频繁地删除和添加dom元素会比较耗费性能