vue基础入门（第五节）【连载...】

                                                                       Vue基础入门(第五节)

--------------------------------------------------------------------------------------------------------------------------

一、Vue中路由的使用

二、与服务器通信

=============================================================

demo代码地址：https://github.com/darkcityX/vueDemo

--------------------------------------------------------------------------------------------------------------------------

一、Vue中路由的使用

      单页面应用程序（single page application）:在一个完整的工程中，可以只有一个完整的页面，其余的都是代码片段。

      SPA的基本工作原理：

            （1）、加载完整的页面

            （2）、解析地址栏中的页面地址和路由地址

            （3）、根据配置好的路由词典，找到该路由地址所对应的要加载的真实的页面

            （4）、发起ajax请求，将真实的页面从服务器加载过来

             （5）、将页面加载到指定的容器中

     1、路由的基本用法：

              任何一个框架的路由模块：建立起url和页面之间的映射关系

              实现一个SPA基本思路

                   （1）、指定一个容器

                                   <router-view></router-view>

                  （2）、创建代码片段

                                    创建组件

                                    var Login = Vue.component('login-component',{

                                                template:`<h1>登陆页面</h1>`

                                    });

                   （3）、配置路由词典

                                 new Vue({

                                             router: new VueRouter({

                                                      routes:[

                                                                  {path:'/myLogin',component:Login}

                                                      ]

                                             })

                                });

                        （4）、测试

                                  测试路由词典中路由地址能否按照需求正确加载所需要用到的页面

          2、页面的跳转

                （1）、可以直接修改地址栏（内部测试）

                （2）、可以通过js ：     this.$router.push('目标路由地址')

                （3）、routerLink  ：   <router-link to="目的地的路由地址"></router-link>

 

               练习：login：在登陆页面 放一个routerLink跳转到Main页面

                          main：在main页面中，放一个按钮（退出登陆），点击跳转到login

           3、跳转的同时如何进行传参

                    扩充： 

                          1）、将路由地址为空的放在路由词典的最上边

                                        {path:'',component:Login}

                          2）、将具体的路由地址对应具体的组件

                                       {path:'/Login',component:Login}

                          3）、异常处理，如果当前页面中的路由地址，在路由词典中没有匹配到，作为异常处理

                                       {path:'*',}

                      参数的传递：

                             （1）、发送：

                                     http://********.com/#/main/zhangsan

                                      this.$router.push('/main/zhangsan')

                            （2）、接收：

                                     const myRoutes = [

                                                  {path:'/main/:uname',component:Main}

                                     ]

                                     this.$route.params.uname

                  综合练习：

                               通过vue和vueRouter来实现一个spa，这个spa中有三个页面：

                                       Check 商品的查看页面btn点击跳转pay（同时将价格100发送）

                                       Pay     商品的支付页面 接收参数显示在h1中，routerLink点击时，跳转到send

                                       send  商品的发货页面btn点击跳转到check

 

    4、嵌套路由

           在一个spa中的某一个路由地址所对应的组件中，还可以接着再嵌套其它的组件。

                   步骤1：先准备嵌套组件的组件，制定一个容器

                   步骤2： 给组件在配置路由词典，指定一个 children

           eg: 假设A组件 需要嵌套B组件、C组件

                   1）、给A组件的模板 指定一个router-view

                   2）、{

                                        path: '',

                                        component: A,

                                        children:[

                                                {path:'/b',component:B}

                                        ]

                             }

             扩充： 如果想要实现页面的前进或后退： this.$router.go(-1);

 

二、与服务器的通信

        1、具体方式： 

                   1）、 引用vue-re'source.js

                   2）、发送请求

                         this.http

                                .get("url")

                                .then((response)=>{

                                               ... ...

                                });

        练习：  http://jsonplaceholder.typicode.com/users

 

                

 

 

                                      

 

 

 

 

 

 

 

 

 

 

 

阅读更多