路由 路由的传参 路由的嵌套 axios

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

1.制作一个简单的路由

 

  
    
    
   


 


   首页
   详情页


 

12041882-8b91678343c0103b.jpg

注释：点击之后可跳转，并出现自己所设置的样式
2.路由的传参:
查询字符串：
/user/regist?uname=jack&&upwd=123
接收：{{

QQ图片20180927080146.png

route.params}}

    
    


   

       首页
       用户页
       
 

点击前

12041882-fe0c5c22d2ccef3e.png

点击后

12041882-b93a31608b98652f.png

3.路由的嵌套

    
    


   

       首页
       用户页
       
   

点击前：

12041882-3ecc4181ad9236f7.png

点击后：

12041882-de2b312f6edcffab.png

4.axios
vue中的ajax 插件
下载axios:
npm install axios
1.0 vue-resource
2.0 axios
安装http-server
npm install http-server -g
使用http-server 开启一个服务器
例：
html:

    
    
    


   


   首页
   详情页

  
 





 

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
}
]

进入127.0.0.1:8080

12041882-b6dc2a3273a1685d.png

点击html：

12041882-699cdde950c8eafb.png

点击详情页：

12041882-387751ee1b6e1aa7.png