路由的传参与axios 路由的传参与axios

1.路由的传参 1.查询字符串

/user/regist?uname=jack&upwd=123"

接收

{{$route.query}}

2.rest风格传参

/user/login/rose/456栽培置路由中{path"login/:uname/:upwd"}

接收

{{$route.params}}

例：

var Home={ template:` 这是首页 ` } var User={ template:`这是用户页注册登录 ` } //查询字符串 var Regist={ template:`这是注册页 {{$route.query}} uname:{{$route.query.uname}} upwd:{{$route.query.upwd}}` } //rest风格传参 var Login={ template:`这是登录页 {{$route.params}} {{$route.params.uname}} {{$route.params.upwd}}` } const routes=[ {path:"/",component:Home}, {path:"/home",component:Home}, {path:"/user", component:User, children:[ {path:"regist",component:Regist}, {path:"login/:uname/:upwd",component:Login} ] } ] const router=new VueRouter({ routes:routes, }) new Vue({ el:"#app", router:router })

【路由的传参与axios】效果如图：

文章图片
Image 1.png

文章图片
Image 3.png 2.axios 1.0 vue-resource
2.0 axios库
axios是vue中的ajax
ajax:前端页面和后台数据做交互
建json文件
发送数据的两种方式：get post
http-server

安装命令: npm install http-server -g 开始一个服务： http-server

例： json文件中的内容

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

JS部分

效果如图：