美文网首页
axios的用法

axios的用法

作者: 我竟无言以对_1202 | 来源:发表于2018-12-26 15:09 被阅读0次

动态路由的匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        var ComDesc = {
            data(){
                return {
                    msg:''
                }
            },
            template:`
                <div>
                    我是{{msg}}
                </div> 
            `,
            created() {
                this.msg = 'frontend';
            },
            watch: {
                '$route'(to,from){
                    console.log(to);
                    console.log(from);
                    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
                        }
                    ]
                },
                {
                    path:'/pins',
                    component:Pins
                }
            ]
        })

        var App = {
            template:`
                <div>
                    <router-link to='/timeline'>首页</router-link>
                    <router-link to='/pins'>沸点</router-link>
                    <router-view></router-view>    
                </div>
            `
        }
        new Vue({
            el:"#app",
            router,
            template:'<App/>',
            components:{
                App
            }
        })
    </script>
</body>
</html>

keep-alive在路由中的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        var Timeline = {
            template:`
                <div id="timeline">
                    我是首页
                </div>
            `,
            created() {
                console.log("首页组件创建")
            },
            mounted() {
                console.log('首页组件DOM加载了')
            },
            destroyed() {
                console.log('首页组件销毁了')
            },
        }

        var Pins = {
            template:`
                <div>
                    <h3 @click='clickHandler'>我是沸点</h3>
                </div>
            `,
            methods: {
                clickHandler(e){
                    e.target.style.color = 'red';
                }
            },
            created() {
                console.log("沸点组件创建")
            },
            mounted() {
                console.log('沸点组件DOM加载了')
            },
            destroyed() {
                console.log('沸点组件销毁了')
            }
        }

        var router = new VueRouter({
            routes:[
                {
                    path:'/timeline',
                    component:Timeline
                },
                {
                    path:'/pins',
                    component:Pins
                }
            ]
        })

        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>
            `
        }
        new Vue({
            el:"#app",
            router,
            template:'<App/>',
            components:{
                App
            }
        })
    </script>
</body>
</html>

meta的使用_控制权限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-link to="/home">首页</router-link>
        <router-link to="/blog">我的博客</router-link>
        <router-link to="/login">登陆</router-link>
        <a href="javascript:void(0)">退出</a>
        <router-view></router-view>
    </div>
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        Vue.use(VueRouter);

        var Home = {
            template:`
                <div>
                    我是首页    
                </div>
            `
        }

        var Blog = {
            template:`
                <div>
                    我是博客    
                </div>
            `
        }

        var Login = {
            data(){
                return{
                    name:'',
                    pwd:''
                }
            },
            template:`
                <div>
                    <input type="text" v-model="name" />
                    <input type="password" v-model="pwd" />
                    <input type="button" value="登陆" @click="loginHandler">
                </div>    
            `,
            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')){
                    next();
                }else{
                    next({
                        path:'/login'
                    });
                }
            }else{
                next();
            }
        })

        new Vue({
            el:"#app",
            router,
        })
    </script>
</body>
</html>

axios的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
        var App = {
            template:`
                <div>
                    <button @click="sendAjax">发请求</button>
                </div>
            `,
            methods: {
                sendAjax(){
                    this.$axios.get('http://127.0.0.1:8888/').then(res=>{
                        console.log(res.data.msg);
                    }).catch(err=>{
                        console.log(err);
                    })
                }
            },
        }

        Vue.prototype.$axios = axios;

        new Vue({
            el:"#app",
            template:'<App/>',
            components:{
                App
            }
        })
    </script>
</body>
</html>

并发请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script>
        var App = {
            data(){
                return{
                    res1:'',
                    res2:''
                }
            },
            template:`
                <div>
                    响应1:{{res1}}
                    响应2:{{res2}}
                    <button @click='sendAjax'>发送请求</button>
                </div>
            `,
            methods: {
                sendAjax(){
                    // get :/

                    // post :/add
                    this.$axios.defaults.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);
                    })
                }
            },
        }

        Vue.prototype.$axios = axios;

        new Vue({
            el:"#app",
            template:'<App/>',
            components:{
                App
            }
        })
    </script>
</body>
</html>

相关文章

  • 8-7、静态方法扩展

    需求 官方axios库实现了axios.all、axios.spread等方法,它们的用法如下: 实际上,axio...

  • Vue接口调用方式(二)axios用法

    axios用法 ✍目录总览: 1. axios的基本特性 axios 是一个基于Promise用于浏览器和node...

  • vue+axios+promise实际开发用法(转载)

    引用vue+axios+promise实际开发用法

  • axios用法

    使用npm下载 npm install axios 我建了一个api文件来统一管理方便省事 然后引入 这个时候写了...

  • axios的用法

    动态路由的匹配 keep-alive在路由中的使用 meta的使用_控制权限 axios的基本使用 并发请求

  • axios请求---进阶用法

    上一篇文章里面大致记录了一下axios的基础用法这一篇文章主要记录axios的进阶用法:实例、配置、拦截器、取消请...

  • 六、Vue.js

    一、发送AJAX请求 1.简介 2,使用axios发送ajax请求 2.1安装axios并引入 2.1基本用法 3...

  • axios 网络请求

    一、安装 axios 依赖 二、导入axios 三、基础用法 1、不传参数(默认是get请求 ) 2、不传参数(第...

  • Axios基本用法

    Axios基本用法 基于promise的HTTP库,前后端交互的插件。参考官网文档 一、Axios特点 从浏览器中...

  • axios的基本用法

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现...

网友评论

      本文标题:axios的用法

      本文链接:https://www.haomeiwen.com/subject/nbwclqtx.html