1、生命周期
2、动态路由传参
3、嵌套路由
公共部分放在layout组件里面
4、Hash模式合History模式的区别
原理的区别:
- Hash模式是基于锚点,以及onhashchange事件
- History模式是基于HTML5中的History API
- history.pushState() IE10以后才支持
- history.replaceState()
如果不设置props:true,就是上面方式获取参数 否则下面方式
5、history模式在node服务器下
因为history模式刷新浏览器会404所以要在服务器配置
6、nginx 环境配置
- 从官网下载 nginx 的压缩包
- 把压缩包解压到 c 盘根目录,c:\nginx-1.18.0 文件夹
- 修改 conf\nginx.conf 文件
location / {
root html;
index index.html index.htm;
#新添加内容
#尝试读取$uri(当前请求的路径),如果读取不到读取$uri/这个文件夹下的首页
#如果都获取不到返回根目录中的
index.html try_files $uri $uri/ /index.html;
}
history模式
通过history.pushState()方法改变地址栏(只是改变地址栏),
监听popState()事件(记录当前地址栏,前进后退按钮,或者 go()、back()事件触发),然后根据当前地址找到对应组件触发
# 启动
start nginx
# 重启
nginx -s reload
# 停止
nginx -s stop
7、Vue的构建版本
- 运行时版:不支持template模板,需要打包的时候提前编译
- 完整版:包含运行时和编译器,体积比运行时大10k左右,程序运行的时候把模板转成render函数
先看一下vueRouter的核心代码,vue.use()这个方法可以传入函数或者对象,如果传入函数vue.use()会直接调用这个函数,如果传入的是对象,vue.use()会调用这个对象里面的install方法,vueRouter是一个类,也就是一个对象,我们过后会实现一个install方法
这个是vueRouter的类图,+号表示对外公布的方法,-号是静态方法。
上代码
实现思路
- 创建 LVueRouter 插件,静态方法 install
- 判断插件是否已经被加载
- 当 Vue 加载的时候把传入的 router 对象挂载到 Vue 实例上(注意:只执行一次)
- 创建 LVueRouter 类
- 初始化,options、routeMap、app(简化操作,创建 Vue 实例作为响应式数据记录当前路径)
- initRouteMap() 遍历所有路由信息,把组件和路由的映射记录到 routeMap 对象中
- 注册 popstate 事件,当路由地址发生变化,重新记录当前的路径
- 创建 router-link 和 router-view 组件
- 当路径改变的时候通过当前路径在 routerMap 对象中找到对应的组件,渲染 router-view
console.dir(Vue)
let _Vue = null
class VueRouter {
static install(Vue){
//1 判断当前插件是否被安装
// installed自己设定的属性
if(VueRouter.install.installed){
return;
}
VueRouter.install.installed = true
//2 把Vue的构造函数记录在全局
_Vue = Vue
//3 把创建Vue的实例传入的router对象注入到Vue实例
// _Vue.prototype.$router = this.$options.router
_Vue.mixin({
beforeCreate(){
// 如果是vue组件就不执行,如果是vue实例就执行,router只存在vue实例上
if(this.$options.router){
_Vue.prototype.$router = this.$options.router
}
}
})
}
constructor(options){
this.options = options
this.routeMap = {}
// observable 存储响应式数据 数据变 更新视图
this.data = _Vue.observable({
current:"/"
})
this.init()
}
init(){
this.createRouteMap()
this.initComponent(_Vue)
this.initEvent()
}
createRouteMap(){
//遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component
});
}
initComponent(Vue){
Vue.component("router-link",{
props:{
to:String
},
render(h){// h函数 第一个参数 选择器标签,第二个 属性,第三个 标签内容
return h("a",{
attrs:{
href:this.to
},
on:{
click:this.clickhander
}
},[this.$slots.default])
},
methods:{
clickhander(e){
// 不会刷新页面对服务器发起i请求
// 第一个参数 传给popState的对象 第二个参数 网页标题 第三个参数超链接跳转到地址
history.pushState({},"",this.to)
this.$router.data.current=this.to // 响应式的对象,更改数据之后会重新加载网页
e.preventDefault()
}
}
/*
* vue的构建版本
* 运行时版:不支持template模板,需要打包的时候提前编译。
* 完整版:包含运行时和编译器,体积比运行时版大10k左右,程序运行时把模板转换成render函数
* */
// template:"<a :href='to'><slot></slot></a>"
})
const self = this
//router-view 相当于一个占位符 根据当前路由地址 获取当前路由组件
Vue.component("router-view",{
// h函数可以把组件 转为虚拟dom
render(h){
// self.data.current
const cm=self.routeMap[self.data.current]
return h(cm)
}
})
}
initEvent(){
//popstate方法 浏览器前进 后退按钮或者 go() back()方法调用, 重新加载对应组件
window.addEventListener("popstate",()=>{
this.data.current = window.location.pathname
})
}
}
8、hash模式实现
https://blog.csdn.net/qq_44746132/article/details/107580083
模拟 VueRouter 的 hash 模式的实现,实现思路和 History 模式类似,把 URL 中的 # 后面的内容作为路由的地址,可以通过 hashchange 事件监听路由地址的变化。
let _Vue = null
export default class VueRouter {
static install(Vue) {
// 1、判断当前插件是否已经安装
if (VueRouter.install.installed) {
return
}
VueRouter.install.installed = true
// 2、把 vue 构造函数记录到全局变量
_Vue = Vue
// 3、把创建 vue 实例时候传入的 router 对象注入到 vue 实例上
// 混入
_Vue.mixin({
beforeCreate() {
if (this.$options.router) {
_Vue.prototype.$router = this.$options.router
this.$options.router.init()
}
}
})
}
constructor(options) {
this.options = options
this.routeMap = {}
this.data = _Vue.observable({
current: '/'
})
}
init() {
this.createRouteMap()
this.initComponents(_Vue)
this.initEvent()
}
createRouteMap() {
// 遍历所有的路由规则,把路由规则解析成键值对的形式,存储到 routeMap 中
this.options.routes.forEach(route => {
this.routeMap[route.path] = route.component
})
}
initComponents(Vue) {
const self = this
Vue.component(
'router-link', {
props: {
to: String
},
render(h) {
return h('a', {
attrs: {
href: '#' + this.to
},
on: {
click: this.clickHandler
}
}, [this.$slots.default])
},
methods: {
clickHandler(e) {
window.location.hash = '#' + this.to
this.$router.data.current = this.to
e.preventDefault()
}
}
}
)
Vue.component('router-view', {
render(h) {
const conmponent = self.routeMap[self.data.current]
return h(conmponent)
}
})
}
initEvent() {
window.addEventListener('load', this.hashChange.bind(this))
window.addEventListener('hashchange', this.hashChange.bind(this))
}
hashChange() {
if (!window.location.hash) {
window.location.hash = '#/'
}
this.data.current = window.location.hash.substr(1)
}
}
在模拟 Vue.js 响应式源码的基础上实现 v-html 指令,以及 v-on 指令。
class Vue {
constructor(options) {
// 1、通过属性保存选项的数据
this.$options = options || {}
this.$data = options.data || {}
this.$methods = options.methods || {}
this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
// 2、把 data 中的成员转换成 getter 和 setter,并注入到 vue 实例中
this._proxyData(this.$data)
// 把 methods 中的成员注入到 vue 实例中
this._proxyMethods(this.$methods)
// 3、调用 observer 对象,监听数据的变化
new Observer(this.$data)
// 4、调用 compiler 对象,解析指令和插值表达式
new Compiler(this)
}
_proxyData(data) {
// 遍历 data 中的所有属性
Object.keys(data).forEach(key => {
// 把 data 的属性注入到 vue 实例中
Object.defineProperty(this, key, {
enumerable: true,
configurable: true,
get() {
return data[key]
},
set(newValue) {
if (newValue !== data[key]) {
data[key] = newValue
}
}
})
})
}
_proxyMethods(methods) {
Object.keys(methods).forEach(key => {
// 把 methods 的成员注入到 vue 实例中
this[key] = methods[key]
})
}
}
class Compiler {
constructor(vm) {
this.el = vm.$el
this.vm = vm
this.compile(this.el)
}
// 编译模板,处理文本节点和元素节点
compile(el) {
let childNodes = el.childNodes
Array.from(childNodes).forEach(node => {
if (this.isTextNode(node)) {
// 处理文本节点
this.compileText(node)
} else if (this.isElementNode(node)) {
// 处理元素节点
this.compileElement(node)
}
// 判断 node 节点,是否有子节点,如果有子节点,要递归调用 compile
if (node.childNodes && node.childNodes.length) {
this.compile(node)
}
})
}
// 编译元素节点,处理指令
compileElement(node) {
// 遍历所有的属性节点
Array.from(node.attributes).forEach(attr => {
// 判断是否是指令
let attrName = attr.name
if (this.isDirective(attrName)) {
// v-text --> text
attrName = attrName.substr(2)
let key = attr.value
if (attrName.startsWith('on')) {
const event = attrName.replace('on:', '') // 获取事件名
// 事件更新
return this.eventUpdate(node, key, event)
}
this.update(node, key, attrName)
}
})
}
// 编译文本节点,处理插值表达式
compileText(node) {
let reg = /\{\{(.+?)\}\}/
let value = node.textContent
if (reg.test(value)) {
let key = RegExp.$1.trim()
node.textContent = value.replace(reg, this.vm[key])
// 创建 watcher 对象,当数据改变时更新视图
new Watcher(this.vm, key, (newValue) => {
node.textContent = newValue
})
}
}
update(node, key, attrName) {
let updateFn = this[attrName + 'Updater']
updateFn && updateFn.call(this, node, this.vm[key], key)
}
eventUpdate(node, key, event) {
this.onUpdater(node, key, event)
}
// 处理 v-text 指令
textUpdater(node, value, key) {
node.textContent = value
new Watcher(this.vm, key, (newValue) => {
node.textContent = newValue
})
}
// 处理 v-html 指令
htmlUpdater(node, value, key) {
node.innerHTML = value
new Watcher(this.vm, key, (newValue) => {
node.innerHTML = newValue
})
}
// 处理 v-model 指令
modelUpdater(node, value, key) {
node.value = value
new Watcher(this.vm, key, (newValue) => {
node.value = newValue
})
// 双向绑定
node.addEventListener('input', () => {
this.vm[key] = node.value
})
}
// 处理 v-on 指令
onUpdater(node, key, event) {
node.addEventListener(event, (e) => this.vm[key](e))
}
// 判断元素属性是否是指令
isDirective(attrName) {
return attrName.startsWith('v-')
}
// 判断节点是否是文本节点
isTextNode(node) {
return node.nodeType === 3
}
// 判断节点是否是元素节点
isElementNode(node) {
return node.nodeType === 1
}
}