axios听课笔记
前言
时长：2h
01动态路由匹配
vue-router
掘金
//当使用路由参数时，如从timeliness/frontend导航到timeline/backend，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
var ComDesc={
data(){return{msh:''}},
template:'<div>我是{{msg}}</div>',
created(){//发ajax
console.log(1);
this.msg='前端';},
//在当前的组件内部，监听路由信息的变化
watch:{
'route'(to,from){
console.log(to);
console.log(from);
//发送ajax请求
this.msg=to.params.id;
}}};
var TimeLine={
template:'
<div id='timeline'>
<router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<router-link :to="{name:'comDesc',params:{id:'backend'}}">后端</router-link>
<router-view></router-view>
</div>'
}
var Pins={
template:'<div>我是沸点</div>'
}
var router=new VueRouter({
routes:[{
path:'/timeline',
component:Timeline,
children:[{
name:'comDesc',
//动态路由参数，以冒号开头
path:'/timeline/:id',
component:ComDesc
}],
}],
})
var App={
template:'<div>
<router-link to='/timeline'>首页</router-link>
<router-link to='/pins'>沸点</router-link>
<router-view></router-view>
</div>'
}
02keep-alive在路由中的使用v
keep-alive用于缓存。作用是保存组件状态或避免重新渲染。
var App={
template:'
<div>
<router-link to='/timeline'>首页</router-link>
<router-link to='/pins'>沸点</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
'
}
03meta的使用-权限控制
methods:{
loginHandler(){
//登录
localStorage.setItem('user',{name:this.name,pwd:this.pwd});
//跳转到博客页面 编程式导航
this.$router.push({
name:'blog'
});
}
}
var router=new VueRouter({
routes:[
{
path:'/',redirect:'/home'
},
{
path:'/home',component:Home
},
{
path:'/blog',component:Blog,name:'blog',
//给未来的路由 做权限控制
meta:{
//证明 用户访问该组件的时候需要登录
auth:true
},
{
path:'/login',component:Login,
}
]
});
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
if(to.meta.auth){
//用户点击了博客链接， 该用户需要登录
if(localStorage.getItem('user')){
//如果localStorage存储不为空 表示用户登录完成直接放行
next()
}else{
//用户需要登录
next({path:'/login'})
}
}else{
//直接放行
next();//如果不调用next()会卡住
}
})
04axios的基本使用
methods:{
sendAjax(){
//发送HTTP请求
this.$axios.get('http://127.0.0.1:8888/')
//获取HTTP响应
.then(res=>{
console.log(res.data.msg);
})
//获取失败的反馈
.catch(err=>{
console.log(err)
})
}
}
05并发请求
methods:{
sendAjax(){
this.$axios.default.baseURL='http://127.0.0.1:8888/';
var r1=this.$axios.get('');
var r2=this.$axios.post('add','a=1');
this.$axios.all([r1,r2])
.then(this.$axios.spread((res1,res2)=>{
this.res1=res1.data;
this.res2=res2.data;
}))
.catch(err=>{
console.log(err)
})
}
}
v-for中key的作用
on进行组件之间的传值
vue-router的导航完成后获取数据
vue-router的导航完成前获取数据
vue-cli2.x脚手架的使用
Vue2全家桶之一：vue-cli（vue脚手架）超详细教程
vue-cli3.x脚手架的使用
06config
总结
之前学vue的时候只是关注了vue的全家桶：vue CLI、vue router、vuex。然后最近在使用vue的时候发现请求很重要，现在使用请求一般是axios。
之前还写了一点axios的小笔记：axios初次笔记（axios、promise是什么）