1--------------------父子组件传递关系
子组件：props:{
banners:{
type:Array,
default(){
return[]
}
}
}
父组件：
2. 视口模式
npm install postcss-px-to-viewport --save-dev 打包时依赖
postcss.config.js
------------
module.exports={
plugins:{
"postcss-px-to-viewport":{
viewportWidth:375, //视窗的宽度，对应的是我们设计稿的宽度
viewportHeight:667, //视窗的高度，对应的是我们设计稿的高度
unitPrecision:5, //指定‘px’转换为视窗单位值的小数位数
viewportUnit:'vw', //指定需要转换成的视窗单位，建议使用vm
selectorBlackList:['ignore','tab-bar','tab-bar-item'], //指定不需要转换的类
minPixelValue:1, //小于或等于‘1px’不转换为视窗单位
mediaQuery:false, //允许在媒体查询中转换‘px’
exclude:[/TabBar/] //正则表达式 ，除TabBar 这个所有匹配文件
}
}
}
3-----Class样式有关
3.1---在路由index.js中添加mode:history 默认是hash模式
3.2----在router中的index.js->添加：linkActiveClass:'active'
.active{
color:red
}
3.3----push按压式堆叠
this.$router.push('/home') 通过代码修改路由 所以不需要加这个标签
.replace('/home')
3.4-----动态路由：
在home.vue中获取相应的id 这里的id是对应 {path:'/home/:userid',component:Home}这里面的userid $route:谁活跃就拿到谁
computed:{
userid(){
return this.$route.params.userid
}
}
3.4.1-----动态路由 query的使用及例子
--->地址形式localhost:8080/profile/userid?name:'why',age:18,height:1.88
在profile.vue取出name:'why',age:18,height:1.88 所对应的值 {{$route.query}}
computed:{
userid(){
return this.$route.query.name
}
}
3.4.2---------APP.vue
data(){
return{ userId:'zhangsan' }
}
method:{
userClick(){ this.$router.push('/user/' + this.userId) }
profileClick(){
this.$router.push({
path:'/profile',
query:{
name:'why',age:18,height:1.88
}
})
}
}
3.5-------懒加载，需要用到时，再调用
const Home =()=>import('../components/Home')
第一种模式： {
path:'/home',
component:Home 第二种模式：component:()=>import('../components/Home')
}
3.6------路由嵌套
{
path:'/home',
component:Home，
children:[
{
path:'',
redirect:'news'
},
{
path:'news',
component:()=>import('../component/HomeNews')
},
{
path:'message',
component:()=>import('../component/HomeMessage')
},
]
}
在Home.vue中配置路由 ：
3.7--------导航守卫：监听页面跳转 在跳转过程经行一些操作 全局守卫
created（）{} 组件创建完
mounted（）{} 挂载在dom 时
updated(){} 界面发生变化
destroyed(){}
-- activated(){} 当页面处于活跃 -》这两个函数，只有该组件被保持了状态使用了keep-alive时，才有效
--deactived(){} 当页面处于不活跃 -》
router->index.js
{
path:'/profile',
component:Profile,
meta:{
title:'档案'
}
}
前置
守卫（guard）/钩子（hook） 跳转之前
router.beforeEach((to,from,next) =>{
从from跳转到to
document.title = to.matched[0].meta.title meta:元数据 描述数据的数据
next()
})
后置守卫
router.afterEach((to,from) =>{
})
3.7-------组件导航守卫 Home.vue
beforeRouteLeave 离开页面之前
beforeRouteLeave(to,from,next){
this.path = this.$route.path;
next()
}
3.8----------keep-alive 组件保留状态
keep-alive 组件保留状态 ->
include 会被缓存
exclude 不会被缓存
3.9-----------
App.vue