1.beforeRouteUpdate(导航守卫)
我们在面对多个id不同的用户的时候,我们会用同一个User组件去渲染他们,只是通过不同的id去请求对应的用户信息,通常我们会做成动态路由,使用动态路径参数来实现,像下面这样
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User}
]
})
这样子的话不管是id为12332432,还是id为787864的用户,都会映射到相同的路由(’/user/:id’),也用的是同一个User组件,需要注意的是,当在当前用户想查询另一个用户的时候,变化的只是id和路由,而当路由使用的是同一个组件时,原来的组件实例会被复用,也就意味着组件的生命周期不会再被调用。
有三个方法可以解决这个问题:
// A.通过检测$route对象
<scripe>
export default{
watch:{
$route(to,from){
//对路由变化做出响应,比如根据新的id重新加载用户信息
}
}
}
</script>
// B.利用导航守卫beforeRouteUpdate
<scripe>
export default{
beforeRouteUpdate(to,from,next){
//对路由变化做出响应,比如根据新的id重新加载用户信息
//记得要next()
}
}
// C.利用key
// vue会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。但是前提是key得保持唯一性,也就是key的值不能是相同的,不然vue会当成是同一个元素,所以我们可以利用path给router-view加上key,使得组件不会被复用,可以正常调用生命周期
```javascript
<template>
<div>
<router-view :key='key'></router-view>
</div>
</template>
<script>
export default({
computed:{
key(){
return this.$route.path
}
}
})
</script>
2.watch的用法
之前我用watch都是用得很死板,比如我要根据路由的变化去处理一些事情,我往往是这样做的:
<script>
export default ({
watch:{
$route(newRoute,oldRoute){
// dosomething
// 可能我想重复调一个方法,但是我也只会把方法再搬一次写过来
}
}
})
</script>
//后来重新看vue文档,发现原来还可以这么写:
<script>
export default ({
watch:{
$route:‘doSomething’
},
methods:{
doSomething(){
console.log('doSomething when the router change')
}
}
})
</script>
3.是node环境的问题,反正我是搞得挺头疼的,每次都有新的问题,先丢几个解决的方法,有空再整理吧
3.用的Ant Design of Vue,表格的时候用到这个,eslint报错了。。。
加一行这个就不报了,意思是让eslint不检测下一行:
<!-- eslint-disable-next-line -->
4.用el-input二次封装的时候,我为了数据回显的时候可以正确地触发方法,我用了nextTick去处理,刚开始是解决了问题,但是后面又触发了其他问题,就是测试那边发现在输入的时候,在已有的文字前面插入文字的时候,光标会跑到最后面,刚开始并不知道是nextTick的问题,调试了很久才发现,原来是nextTick的问题
一开始是这么写
后面发现是nextTick的问题,就改成下面这样了