vue基础---三-CSDN博客

本文链接：https://blog.csdn.net/m0_55916987/article/details/127517930

《VUE》系列项目

十二、axios

12.1 axios 介绍

vue可以实现数据渲染，但是如何获取数据？

vue本身不具备通信能力，通常结合一个axios— 一个专注于异步通信的js框架

axios 数据通信
vue 数据渲染

12.2 axios的使用

原生ajax—实现步骤复杂
jQuery 笨重
axios 简洁、高效、对RESTful支持良好

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript" src="js/axios.min.js" ></script>
 </head>
 <body>
 <div id="container">
 
 <button type="button" @click="test1">测试1</button>
 </div>
 <script type="text/javascript">
 var vm = new Vue({
 el:"#container",
 methods:{
 test1:function(){
 //发送异步请求
 // axios.get(url).then(fn);
 // axios.get(url,{}).then(fn)
 axios.get("http://localhost:9999/music/detail",{
 params:{
 id:"25640392"
 }
 })
 .then(function(res){
 console.log(res);
 });
 }
 }
 });
 </script>
 
 </body>
</html>

12.3 axios异步请求⽅法

axios提供了多种异步请求⽅法，实现对RESTful⻛格的⽀持

12.3.1 get请求

axios.get(url).then(fn);
axios.get(url,{}).then(fn)

//使⽤axios的get请求传递参数，需要将参数设置在params下
axios.get("http://localhost:9999/music/detail",{
 params:{
 id:"25640392"
 }
})
 .then(function(res){
 console.log(res);
});

12.3.2 post请求

axios.post(url,{}).then(fn)

axios.post("http://localhost:9999/music/search",{s:"阿刁"})
 .then(function(res){
 console.log(res);
});

12.3.3 ⾃定义请求

⾃定义请求：⾃定义请求⽅式、请求参数、请求头、请求体（post）

axios({
 url:"http://localhost:9999/music/search",
 method:"post",
 params:{
 //设置请求⾏传值
 s:"成都",
 limit:15
 },
 headers:{
 //设置请求头
 },
 data:{
 //设置请求体（post/put）
 }
}).then(function(res){
 console.log(res)
});

12.3.4 其他

delete
put
option

12.4 并发请求

<div id="container">
 <button type="button" @click="test1">测试1</button>
</div>
<script type="text/javascript">
 var vm = new Vue({
 el:"#container",
 methods:{
 test1:function(){
 //发送异步请求
 axios.all([listMusics(),getMusicDetail()]).then(axios.spread(function (r1, r2) {
 // 两个请求现在都执⾏完成
 console.log(r1);
 console.log(r2);
 }));
 }
 }
 });
 function listMusics() {
 return axios.get('http://localhost:9999/music/search?s=成都');
 }
 function getMusicDetail() {
 return axios.get('http://localhost:9999/music/detail?id=25640392');
 }
</script>

12.5 箭头函数

12.5.1 axios回调函数的参数res

res并不是接⼝返回的数据，⽽是表示⼀个响应对象；res.data才表示接⼝响应的数据

12.5.2 箭头函数

<script type="text/javascript">
 var vm = new Vue({
 el:"#container",
 data:{
 song:{
 }
 },
 methods:{
 test1:function(){
 //发送异步请求
 axios.get("http://localhost:9999/music/detail?id=25640392").then( (res)=>{
 // res并不是接⼝返回的数据，⽽是表示⼀个响应对象；res.data才表示接⼝响应的数据
 if(res.data.code == 200){
 this.song = res.data.songs[0];
 }
 });
 }
 }
 });
</script>

十三、路由router

router是由vue官⽅提供的⽤于实现组件跳转的插件

13.1 路由插件的引⽤

13.3.1 离线

<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js"></script>

13.3.2 在线CDN

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

13.2 路由使⽤案例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 body{padding: 0px;margin: 0px;}
 ul{list-style: none;}
 ul li{display: inline; float: left; margin-left: 15px; margin-bottom: 15px;}
 ul li a{text-decoration: none; color: white; font-size: 18px; font-weight: bold;}
 ul li a:hover{color: yellow;}
 </style>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript" src="js/vue-router.js"></script>
 </head>
 <body>
 
 <div id="container">
 <div style="width: 100%; height: 70px; background: #00BFFF;">
 <table>

 <tr>
 <td><img src="img/logo.png" height="70" style="margin-left:100px;"/></td>
 <td>
 <ul>
 <li><router-link to="/a">⾸⻚</router-link></li>
 <li><router-link to="/b">Java</router-link></li>
 <li><router-link to="/c">HTML5</router-link></li>
 <li><router-link to="/d">Python</router-link></li>
 </ul>
 </td>
 </tr>
 </table>
 </div>
 <div style="width: 100%; height: 680px; background: lemonchiffon;">
 <router-view></router-view>
 </div>
 </div>
 <script type="text/javascript">
 // vue的路由旨在为单⻚⾯应⽤开发提供便捷
 //1.定义链接跳转的模板（组件）
 const t1 = {template:`<p>index</p>`};
 const t2 = {template:`<p>Java</p>`};
 const t3 = {template:`<p>HTML5</p>`};
 const t4 = {template:`<p>PYTHON</p>`};
 
 const myrouter = new VueRouter({
 routes:[
 {path:"/a",component:t1},
 {path:"/b",component:t2},
 {path:"/c",component:t3},
 {path:"/d",component:t4}
 ]
 });
 
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
 </script>
 
 </body>
</html>

13.3 动态路由匹配

13.3.1 通配符

可以匹配任意路径

例如：

/user- * 匹配所有以 user- 开头的任意路径
/ * 匹配所有路径

注意 如果使⽤通配符定义路径，需要注意路由声明的顺序

13.3.2 路由参数

/a/:id 可以匹配 /a/ 开头的路径

<div id="container">
 <li><router-link to="/a/101">⾸⻚</router-link></li>
 <router-view></router-view>
</div>
 
<script type="text/javascript">
 const t1 = {template:`<p>index:{{$route.params.id}}</p>`};
 const myrouter = new VueRouter({
 routes:[
 {path:"/a/:id",component:t1}
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
</script>

13.3.3 优先级

如果⼀个路径匹配了多个路由，则按照路由的配置顺序：路由定义的越早优先级就越⾼。

13.4 嵌套路由

在⼀级路由的组件中显示⼆级路由

<div id="container">
 <router-link to="/a">⾸⻚</router-link>
 <router-link to="/a/c1">⾸⻚-c1</router-link>
 <router-link to="/a/c2">⾸⻚-c2</router-link>
 <router-view></router-view>
</div>
<script type="text/javascript">
 const t1 = {
 template:"<div style='width:400px; height:200px; border:blue 1px solid'>index<hr/>
<router-view></router-view></div>"
 };
 const t2 = {template:`<div>t2</div>`};
 const t3 = {template:`<div>t3</div>`};
 const myrouter = new VueRouter({
 routes:[
 {
 path:"/a",
 component:t1,
 children:[
 {
 path:"c1",
 component:t2
 },
 {
 path:"c2",
 component:t3
 }
 ]
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
</scrip

13.5 编程式导航

13.5.1 push()

<div id="container">
 <button type="button" @click="test">按钮</button>
 <router-view></router-view>
</div>
<script type="text/javascript">
 const t1 = {
 template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
 };
 const myrouter = new VueRouter({
 routes:[
 {
     path:"/a",
     component:t1
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter,
 methods:{
 test:function(){
 //js代码实现路由跳转：编程式导航
 myrouter.push("/a");
 }
 }
 });
</script>

13.5.2 push()参数

//1.字符串
myrouter.push("/a");
//2.对象
myrouter.push({path:"/a"});
//3.命名的路由 name参数指的是定义路由时指定的名字
myrouter.push({name:"r1",params:{id:101}});
//4.URL传值，相当于/a?id=101
myrouter.push({path:"/a",query:{id:101}});

13.5.3 replace()

功能与push⼀致，区别在于replace()不会向history添加新的浏览记录

13.5.4 go()

参数为⼀个整数，表示在浏览器历史记录中前后/后退多少步相当于 window.history.go(-1) 的作⽤

13.6 命名路由

命名路由：在定义路由的时候可以给路由指定name，我们在进⾏路由导航时可以通过路由的名字导航

<div id="container">
 <input type="text" v-model="rname"/>
 <router-link :to="{name:rname}">t1</router-link>
 <button type="button" @click="test">按钮1</button>
 <router-view></router-view>
</div>
<script type="text/javascript">
 const t1 = {
 template:"<div style='width:400px; height:200px; border:blue 1px solid'>t1</div>"
 };
 const t2 = {
 template:"<div style='width:400px; height:200px; border:red 1px solid'>t2</div>"
 };
 const myrouter = new VueRouter({
 routes:[
 {
 path:"/a",
 name:"r1",
 component:t1
 },
 {
 path:"/b",
 name:"r2",
 component:t2
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 data:{
 rname:"r1"
 },
 router:myrouter,
 methods:{
 test:function(){
 myrouter.push({name:vm.rname});
 }
 }
 });
</script>

13.7 命名路由视图

<div id="container">
 <router-link to="/a">t1</router-link>
 <router-link to="/b">t2</router-link>
 <!--路由视图-->
 <!--如果在HTML中有⼀个以上的路由视图router-view，需要给router-view指定name，在路由中使⽤components映
射多个组件根据name设置组件与router-view绑定关系-->
 <router-view name="v1"></router-view>
 <router-view name="v2"></router-view>
</div>
<script type="text/javascript">
 const t11 = {
 template:"<div style='width:400px; height:200px; border:blue 1px solid'>t11</div>"

 };
 const t12 = {
 template:"<div style='width:400px; height:200px; background:pink'>t12</div>"
 };
 const t21 = {
 template:"<div style='width:400px; height:200px; border:red 1px solid'>t21</div>"
 };
 const t22 = {
 template:"<div style='width:400px; height:200px; background:yellow'>t22</div>"
 };
 const myrouter = new VueRouter({
 routes:[
 {
 path:"/a",
 components:{
 v1:t11,
 v2:t12
 }
 },
 {
 path:"/b",
 components:{
 v1:t21,
 v2:t22
 }
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
</script>

13.8 重定向和别名

13.8.1 重定向

访问 /b ，重定向到 /a

<div id="container">
 <router-link to="/a">路径A</router-link>
 <router-link to="/b">路径B</router-link>
 <router-view></router-view>
</div>
<script type="text/javascript">
 const t1 = {
 template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
 };
 const myrouter = new VueRouter({
 routes:[
 {
 path:"/a",
 component:t1
 },
 {
 path:"/b",
 redirect:"/a"
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
</script>

根据路由命名重定向

const myrouter = new VueRouter({
 routes:[
 {
 path:"/a",
 name:"r1",
 component:t1
 },
 {
 path:"/b",
 //redirect:"/a" //根据路由路径重定向
 redirect:{name:"r1"} //根据路由命名重定向
 }
 ]
});

13.8.2 路由别名

<div id="container">
 <router-link to="/a">路径A</router-link>
 <router-link to="/wahaha">路径wahaha（别名）</router-link>
 <router-view></router-view>
</div>
<script type="text/javascript">
 const t1 = {
 template:"<div style='width:400px; height:200px; border:blue 1px solid'>index</div>"
 };
 const myrouter = new VueRouter({
 routes:[
 {
 path:"/a",
 alias:"/wahaha",
 component:t1
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
</script>

13.9 路由组件传参

可以通过 /url/:attr ⽅式实现通过路由传值给组件

<div id="container">
 <router-link to="/a/101">路径A</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
 const t1 = {
 template:`<div style='width:400px; height:200px; border:blue 1px solid'>
 index：{{$route.params.id}}
 </div>`
 };
 const myrouter = new VueRouter({
 routes:[
 {
 path:"/a/:id",
 component:t1
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
</script>

通过props传参

<div id="container">
 <router-link to="/a/102">路径A</router-link>
 <router-view></router-view>
</div>
<script type="text/javascript">
 const t1 = {
 props:["id"],
 template:`<div style='width:400px; height:200px; border:blue 1px solid'>
 index：{{id}}
 </div>`
 };
 const myrouter = new VueRouter({
 routes:[
 {
 path:"/a/:id",
 props:true,
 component:t1
 }
 ]
 });
 var vm = new Vue({
 el:"#container",
 router:myrouter
 });
</script