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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 161,601评论 4赞 369
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 68,367评论 1赞 305
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 111,249评论 0赞 254
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,539评论 0赞 217
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,967评论 3赞 295
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,929评论 1赞 224
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 32,098评论 2赞 317
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,825评论 0赞 207
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,609评论 1赞 249
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,796评论 2赞 253
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,282评论 1赞 265
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,603评论 3赞 261
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,277评论 3赞 242
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,159评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,959评论 0赞 201
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 36,079评论 2赞 285
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,874评论 2赞 277

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

推荐阅读更多精彩内容