Vue结合网络数据开发应用
axios：功能强大的网路请求库，异步请求
引入：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
语法：
axios.get(address?key=value&key2=value).then(function(resopnse){},function(err){})
axios.post(address,key:value&key2:value).then(function(resopnse){},function(err){})
then方法会在请求成功或者失败的时候触发
通过回调函数形参知道相应内容
axios中回调的this已经发生改变，无法访问到外部，直接使用this不是一个，需要临时存储。
Vue中路由（VueRouter）
按照一定请求规则显示组件，
引入：
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 路由组件 --> <router-view></router-view> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> //使用const定义常量 const login={ template:`<h1>login</h1>` }; const register={ template:`<h1>register</h1>` }; //创建路由对象,绑定常量模板 const router=new VueRouter({ routes:[ {path:"/login",component:login}, {path:"/register",component:register} ] }); const app=new Vue({ el:"#app", data:{ }, methods:{}, //vue实例和router产生关系 router:router }) </script> </body> </html>
路由绑定不同的组件，这里注册的不是组件，注册的是路由，路由绑定组件，组件是不易变得使用const定义。
router-link用来切换路由，tag标签能切换类型
<router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link>
默认路由就是写在路由组件
{path:"/",component:login},
//重定向
{path:"/",redirect:"/login"},
路由中参数的传递传统方式
通过？传递参数
<router-link to="/login?id=1&name=22">登录</router-link>
接受：
const login={ template:`<h1>login</h1>`, created(){ console.log(this.$route.query.id); }, };
使用restful方式获取id，name
<router-link to="/register/11/liming">注册</router-link>
{path:"/",redirect:"/login"},
{path:"/login",component:login},
{path:"/register/:id/:name",component:register}
const register={ template:`<h1>register{{this.$route.params.id}}{{this.$route.params.name}}</h1>` };
路由的嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <router-link to="/product">商品管理</router-link> <router-view></router-view> </div> <template id="product"> <div> <h1>商品管理</h1> <router-link to="/product/add">商品添加</router-link> <router-link to="/product/remove">商品删除</router-link> <router-view></router-view> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> const product={ template:`#product` }; const productAdd={ template:`<h1>商品添加</h1>` }; const productRemove={ template:`<h1>商品删除</h1>` }; //自定义路由 const route=new VueRouter({ routes:[ { path:'/product', component:product, children:[ {path:"add",component:productAdd}, {path:"remove",component:productRemove} ] }, ] }); const vm=new Vue({ el:"#app", router:route }); </script> </body> </html>
