开发中的注意事项:代码性能的优化
1. 减少对第三方的依赖,降低耦合度
2. 加强组件的重复利用率
3. 按需加载
4. 缓存 (尽量发送请求后保存数据)
5. 开发过程中,尽量有着面向对象的思想,这个组件的方法尽量在这个组件上
vuex mit-ui axios better-scroll 还算是开发利器
开发细节:文件细分, .vue 文件首字母大写,文件名保持字母小写
alias:别名
import Home from "@/components/Home.vue";
import Find from "@/components/Find.vue";
这种引入方式,会把组件中的 js 代码放在一个 js 文件中,看其中一个页面,相当于也把其他的组件 js 代码页加载了,项目太大,影响性能,我们需要按需加载,
意思就是,打开 home 组件,只加载 home里的 js ,就不加载其他的组件中的 js 代码
上面的代码,会将多个组件中的 js 代码放在一个 js 文件中
let Home =()=> import("@/components/Home.vue");
let Find =()=> import("@/components/Find.vue");
这种写法就是路由的按需加载
缓存:keep-alive
html 的结构
<keep-alive>
<keep-view></keep-view>
</keep-alive>
在路由中的 router文件的 index.js 的写法为
粘性定位:
position:sticky
meta 元信息
导航守卫:让 title 的标签内容,随着我们的路由变化而变化
配置路由中的时候,有个 meta 的属性,路由中的元信息
设置组件中的元信息:
在当前组件获取元信息:this.$route.meta
修改 title 标签中的内容:document.title = this.$route.meta.title
和缓存的写法差不多
导航守卫
router 实例中提供了一个方法:beforeEach()
在路由的跳转的时候,会触发这个事件
router.beforeEach((to,from,next)=>{
/* to:路由的配置信息,即将进入的路由
from:路由的配置信息,当前导航离开的路由,第一次为 null
next():是一个函数,必须调用,否则路由中断跳转
*/
document.title = to.meta.title;
next()
})
注意事项:当我们进行子路由中的子路由的时候,我们的 title 的内容会显示为 undefined ,需要我们在 子路由中的子路由中 也要进行 meta 的配置
exact 激活高亮 在 router-link 的组件上
redirect :重定向,基本上是在父组件的定向子组件的内容