vue3
1) vue实例
let app = Vue.createApp()
let vm = app.mount('#app');
2) 生命周期钩子函数
beforeCreate
vue对象的实例化,数据劫持(数据具有响应式)
created
vnode(虚拟节点)
模板编译 template/el --抽象语法树ast--> render()
beforeMount
vm.$el 【render函数产生的dom节点node】
mounted
替换完成
ajax() -> 微任务(宏任务)
[8ajax] / dom更新
beforeUpdate
updated
beforeUnmount
unmounted
3) 防抖
4) 组合式API
vuerouter vue官方提供的路由机制
主要应用在单页面程序中,通过监听URL地址改变,动态加载组件的机制
1) 应用
1. v2 + vueRouter3
1) 路由器创建
let router = new VueRouter({
mode:'hash',
routes:[{
path:'/article',
component:Article
}]
})
2) 路由器注入
作为Vue根组件的选项
new Vue({
el:'#app',
router
})
3) 应用
<router-link></router-link>
<router-view></router-view>
2. v3 + vueRouter4
1) 路由器插件的创建
let router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes:[]
})
2) 路由器插件的安装
let app = Vue.createApp();
app.use(router)
app.mount('#app')
3) 应用
<router-link></router-link>
<router-view></router-view>
2) 动态参数
let router = VueRouter.createRouter({
routes:[{
path:'/articleDetails/:id/'
}]
})
this.$router.push('/articleDetails/1')
3) 嵌套路由
4) 编程导航
1. 跳转
this.$router.push({ path:'路由path', query:{} })
目的组件
this.$route.query来获取参数
this.$router.push({ name:'路由name', query:{},params:{}})
目的组件
this.$route.params来获取参数,如果在目的组件中进行页面刷新,params就会消息: 缓存
2. 加载问题
/article -> /articleDetails/1 -> /article -> /articleDetails/2
重新加载
/article -> /articleDetails/1 -> /articleDetails/2
vue生命周期无法重新执行
1) 监听
this.$route.params
2. 路由守卫
5) 路由守卫
全局
router.beforeEach
router.afterEach
组件独享
routes:[{
path:'/article',
component:Article,
beforeEnter:function(){}
}]
组件内部
{
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
}
6) 路由模式
hash模式
history模式
vue day5+6
最新推荐文章于 2024-09-03 21:44:01 发布