香香鲲 - 博客园

2022年9月13日

摘要：全局前置守卫beforeEach beforeEach.((to,from,next)=>{}) 全局后置守卫afterEach afterEach.((to,from)=>{}) 全局解析钩子beforeResolve 路由独享守卫beforeEnter beforeEnter.((to,from 阅读全文

posted @ 2022-09-13 22:37 香香鲲阅读(615) 评论(0) 推荐(0) 编辑

2022年9月10日

Vue2：注册子路由

摘要： const routes = [ { path: '/a', name: 'a', component: () => import("../views/a/index.vue"), redirect: "/a/a1", //用输入的是/a路由帮他重定向到 /a/a1 children: [{ pa 阅读全文

posted @ 2022-09-10 11:21 香香鲲阅读(100) 评论(0) 推荐(0) 编辑

Vue2：路由传参（query传参和动态路由传参）

摘要：动态路由传参路由传参有2种方式传递的参数都在路由信息对象中: 路由对应的组件中获取 this.$route 1、query传参 query传参是把参数放在querystring字段中 //2种传参: <router-link to="/xx?name=karen&pwd=123">go</rou 阅读全文

posted @ 2022-09-10 10:15 香香鲲阅读(1886) 评论(0) 推荐(0) 编辑

2022年9月9日

Vue2：router-view / router-link标签、页面跳转

摘要： router-view / router-link标签 router-view:相当于路由网址匹配到的组件会渲染到当前组件的这个标签上(学不学的会路由就看能不能理解这个) <router-view></router-view> router-link:相当于a标签,给我们提供跳转到某个路由的功阅读全文

posted @ 2022-09-09 22:40 香香鲲阅读(686) 评论(0) 推荐(0) 编辑

Vue2：异步组件

摘要：什么是异步组件所谓的异步组件就是通过import或者require导入的vue组件。为什么需要异步组件 vue开发过程中，我们会做出特别多的组件，包括login,header,footer,main等等，会使页面打开很慢。异步组件的作用可以避免页面一加载时就去加载全部的组件，从而导致页面访问阅读全文

posted @ 2022-09-09 13:22 香香鲲阅读(4162) 评论(0) 推荐(0) 编辑

Vue2：缓存组件keep-alive

摘要： keep-alive 动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件失阅读全文

posted @ 2022-09-09 13:08 香香鲲阅读(630) 评论(0) 推荐(0) 编辑

Vue2：动态组件

摘要：动态组件要实现不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件 component 标签的 is属性语法： is后跟组件的变量名决定使用哪个组件来渲染 <component is="Sinabox"></component>==><Sinabox/> <component v-bi 阅读全文

posted @ 2022-09-09 12:52 香香鲲阅读(393) 评论(0) 推荐(0) 编辑

Vue2：自定义事件的语法

摘要： Vue提供的技术:某继承Vue的组件有三个功能: 1.触发x组件的a事件: x.$emit("a事件",参数...) 2.给x组件绑定a事件 x.$on("a事件",监听器函数) 3.给x组件解绑a事件 x.$off("a事件",监听器函数) 阅读全文

posted @ 2022-09-09 11:48 香香鲲阅读(60) 评论(0) 推荐(0) 编辑

2022年9月8日

Vue2：中央事件总线bus

摘要： event bus 通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果 1、在vue-bus.js文件中 const install = function (Vue) { const Bus = new Vue({ methods: { emit(even 阅读全文

posted @ 2022-09-08 13:29 香香鲲阅读(650) 评论(1) 推荐(1) 编辑

Vue2：Provide/Inject

摘要： Provide/Inject 通常情况下，父组件向孙组件传递数据，可以采用父子props层层传递，也可以使用bus和Vuex直接交互。在Vue2.2.0之后，Vue还提供了provide/inject选项 //父组件 <template> <div> <p>{{ title }}</p> <son 阅读全文

posted @ 2022-09-08 13:24 香香鲲阅读(419) 评论(0) 推荐(1) 编辑