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

一、路由

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

        npm install vue
       
       npm install vue-router

body部分：

 

   
   首页
   详情页
   关于我们
 
  

js部分：

路由.png

二、路由的嵌套

body部分：

   首页
   用户页
   

js部分：

路由的嵌套.png

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

body部分：

 

   首页
   用户页
   
 

js部分：

效果图：

路由的传参.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部分：

 
   首页
   详情页
    
   

js部分：

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