2018-09-25vue.router路由和路由的嵌套、路由的传参、vue中的ajax (axios)

一、路由

路由：vue-router 带三方工具库
创建单页面应用 spa (single page application)
通过不同的URL访问不同的页面
下载：

        npm install vue
       
       npm install vue-router

body部分：

 <div id="itany">
   <!-- 1.-->
   <router-link to='/index'>首页</router-link>
   <router-link to='/detail'>详情页</router-link>
   <router-link to='/about'>关于我们</router-link>
 <!-- 盛放导航对应的内容-->
  <router-view></router-view>

js部分：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
   //  2.创建组件
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    
    var Detail={
        template:`
            <h1>这是详情页</h1>
        `
    }
    
    var About={
        template:`
            <h1>这是关于我们</h1>
        `
    }
    
    
   // 3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/detail',component:Detail},
        {path:'/about',component:About}
    ]
    
    
  // 4.创建一个路由实例
    
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:'active'
    })
    
    
   // 5.把路由实例挂载到vue实例上
    
    new Vue({
        el:"#itany",
        router:router
    })
</script>
路由.png

二、路由的嵌套

body部分：

<div id="itany">
   <router-link to='/index'>首页</router-link>
   <router-link to='/user'>用户页</router-link>
   <router-view></router-view>
</div>

js部分：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//  2.创建组件
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    var User={
        template:`
            <div>
                <h1>这是用户页</h1>
                <ul>
                     <li><router-link to='/user/regist'>这是注册页面</router-link></li>
                    <li><router-link to='/user/login'>这是登录页面</router-link></li>
                </ul>
                <router-view></router-view>
            </div>
        `
    }
    var Regist={
        template:`
            <h3>注册页面</h3>
        `
    }
    var Login={
        template:`
            <h3>登录页面</h3>
    `
    }
//   3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist},
                {path:'login',component:Login}
            ]
        }
    ]
//  4.创建路由实例
    const router=new VueRouter({
        routes:routes
    })
    new Vue({
        el:"#itany",
        router:router
    })
</script>
路由的嵌套.png

三、路由的传参
路由的传参：
查询字符串：
/user/regist?uname=jack&&upwd=123
接收：{{route.query}} rest风格传参 /user/login/rose/456 接收： {{route.params}}
-->

body部分：

 <div id="itany">
   <router-link to='/index'>首页</router-link>
   <router-link to='/user'>用户页</router-link>
   <router-view></router-view>
 </div>

js部分：

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
// 2.创建组件
    var Index={
        template:`
            <h1>这是首页</h1>
        `
    }
    var User={
        template:`
            <div>
                <h1>这是用户页</h1>
                <ul>
                     <li>
                           <router-link to='/user/regist?uname=jack&upwd=123'>这是注册页面
                          </router-link>
                     </li>
                    <li><router-link to='/user/login/rose/456'>这是登录页面</router-link></li>
                </ul>
                <router-view></router-view>
            </div>
        `
    }
  //  字符串传参 /user/regist?uname=jack&upwd=123
   //  接收       {{$route.query}}
    
  // rest传参   /user/login/rose/456   
 //  配置路由：{path:'login/:userName/:password',component:Login}
// 接收：{{$route.params}}
    
    var Regist={
        template:`
            <div>
                <h3>注册页面</h3>
                <a href="#">{{$route.query}}</a>
                <ul>
                    <li>{{$route.query.uname}}</li>
                    <li>{{$route.query.upwd}}</li>
                </ul>
            </div>
        `
    }
    var Login={
        template:`
            <div>
                <h3>登录页面</h3>
                <a href="#">{{$route.params}}</a>
                <ul>
                    <li>{{$route.params.userName}}</li>
                    <li>{{$route.params.password}}</li>
                </ul>
            </div>
    `
    }
    //  3.配置路由
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {
            path:'/user',
            component:User,
            children:[
                {path:'regist',component:Regist},
                {path:'login/:userName/:password',component:Login}
            ]
        }
    ]
 //4.创建路由实例
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:'active'
    })
    new Vue({
        el:"#itany",
        router:router
    })
</script>

效果图：

路由的传参.png

四、vue中的ajax (axios)

vue中的ajax 插件
下载axios:
npm install axios
1.0 vue-resource
2.0 axios

 安装http-server
     npm install http-server -g   
         
 使用http-server 开启一个服务器

body部分：

<div id='app'>
 <!--1.-->
   <router-link to='/index'>首页</router-link>
   <router-link to='/detail'>详情页</router-link>
    <!--盛放导航对应的内容-->
   <router-view></router-view>
</div>

js部分：

<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script src='js/axios.js'></script>
<script>
   //2. 创建组件
    var Index={
        template:`
           <h1>这是首页</h1>
         `
    }
    
    var Detail={
        template:`
         <div>
          <h1>我是详情页</h1>
           <table border=1 cellspacing=0>
            <thead>
                <tr>
                   <td>编号</td>
                   <td>品名</td>
                   <td>单价</td>
                   <td>数量</td>
                   <td>小计</td>
                </tr>
            </thead>
            <tbody>
               <tr v-for="value in fruList">
                   <td>{{value.num}}</td>
                   <td>{{value.pname}}</td>
                   <td>{{value.price}}</td>
                   <td>{{value.count}}</td>
                   <td>{{value.sub}}</td>
               </tr>
            </tbody>
           </table>
         </div>
         `,
        data:function(){
            return{
                fruList:null
            }
        },
        mounted:function(){
            var self=this;
            axios({
                method:'get',//发送数据的方式
                url:'fruit.json'
            }).then(function(resp){//请求成功
    //  console.log(resp)
                console.log(resp.data)
                 self.fruList=resp.data
            }).catch(function(err){//请求失败
                console.log(err)
            })
        }
    }
    
    //3.配置路由
    
    const routes=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/detail',component:Detail}
    ]
    
    //4.创建一个路由实例
    const router=new VueRouter({
        routes:routes,
        linkActiveClass:"active"
    })
    //5.把路由实例挂在到vue实例上 
   new Vue({
       el:'#app',
       router:router
   })
   
</script>

json部分：

  [
     {
    "num":1,
    "pname":"apple",
    "price":3,
    "count":4,
    "sub":12
},
{
    "num":2,
    "pname":"pear",
    "price":4,
    "count":5,
    "sub":20
},
 {
     "num":3,
    "pname":"orange",
    "price":5,
    "count":6,
    "sub":30
  }
]

链接网址：
http://192.168.1.108:8080
http://127.0.0.1:8080

效果图：


axios.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容