&＃xff08;1&＃xff09;通过 组件实现“跳转”

router­link的to属性可以设置切换的URL。to后面可以设置“静态的URL”或者绑定“一个路由项对象”&＃xff0c;例 如下面的两个示例&＃xff0c;前者设置URL&＃xff0c;后者绑定一个定义了的路由对象。

登录
购物车。

&＃xff08;2&＃xff09;通过推送路由变更$router.push()&＃xff0c;从而实现“跳转”

配置好路由的项目中&＃xff0c;我们可以在任意Vue组件内部&＃xff0c;通过this.$router访问路由对象&＃xff0c;通过 $router.push()方法&＃xff0c;我们可以向路由推送跳转&＃xff0c;实现组件的切换。

this.$router.push({name:"product‐list", query:{"name":val}});

 1.3.4 路由参数的获取

&＃xff08;1&＃xff09;路径参数与获取 我们在路由映射中&＃xff08;router.js&＃xff09;定义了以下一项&＃xff1a;

{ path:&＃39;/product/:id&＃39;, name:&＃39;product&＃39;, component: ProductDetail }


 也就是在跳转到ProductDetail组件时&＃xff0c;我们会传入名为id的路径参数。

例如&＃xff0c;在产品列表中有以下路由连接&＃xff0c;点击后实际的URL可能为 “/product/5”&＃xff0c;其中5是id参数。

产品1连接

这时&＃xff0c;我们可以在目标组件ProductDetail中&＃xff0c;通过 “$route.params.参数名” 获取到路径参数值&＃xff1a; 

let id &＃61; this.$route.params.id;

&＃xff08;2&＃xff09;查询字符串参数的获取

路径参数是URL路径的一部分&＃xff0c;通常只能用于传递必要参数&＃xff08;一定要提供的参数&＃xff09;&＃xff0c;对于可选参数就应 该使用查询字符串的方式来传递&＃xff0c;例如&＃xff1a;“search?name&＃61;abc&page&＃61;101”。

对于查询字符串参数&＃xff0c;我们可以通过以下方式传递。 

searchByProductName(e){var val &＃61; e.target.value;this.$router.push({name:"product‐list", query:{"name":val}});
}


 上述路由推送会产生类似这样的URL&＃xff1a;“product­list?name&＃61;xxxx” 这时&＃xff0c;我们可以在目标组件ProducList中&＃xff0c;通过“$router.query.参数名”获取查询字符串参数值。

let searchName &＃61; this.$route.query.name

2 异步请求

2.1 后端RESTful Web服务和代理

&＃xff08;1&＃xff09;后端RESTful Web服务

SPA一般都采用前后端分离的开发方式。后端可以使用任何的服务器端Web技术&＃xff0c;诸如JavaEE、 PHP、Node.js、Python等等&＃xff0c;后端提供基于RESTful风格的Web服务&＃xff0c;接收前端请求并返回JSON格式 的数据。

这里使用基于Spring Boot的MVC技术提供后端服务&＃xff0c;具体细节略去&＃xff0c;仅在这里描述所提供的服务接 口。

具体请求效果如下图所示。

 &＃xff08;2&＃xff09;服务的代理

作为前后端分离的项目&＃xff0c;后端和前端往往不是运行在同一个服务器中的。例如上述开发中&＃xff0c;后端的 JavaEE服务是运行在Tomcat服务器&＃xff08;Spring Boot内嵌的容器&＃xff09;中的&＃xff0c;而前端则是使用Node.js提供的测 试服务器。前者域名为“localhost:9090”&＃xff0c;而后者是“localhost:3000”。这时&＃xff0c;如果前端通过AJAX技术请 求后端数据&＃xff0c;就会遇到Javascript请求不能跨域执行的问题而无法请求。要解决这个问题&＃xff0c;要么就需要 使用jsonp协议&＃xff08;跨域JSON协议&＃xff09;&＃xff0c;要么就要把前后端两个服务器通过代理服务器代理到同一个域名之 下。在实际部署中&＃xff0c;我们可以通过Nginx等静态资源服务器实现代理&＃xff0c;而在开发中Vue项目可以直接配置 后端代理&＃xff0c;把lcoalhost:9090的域名请求代理到localhost:3000域名之下。

在项目根目录下添加 “vue.config.js” 文件&＃xff0c;这时vue项目的配置文件&＃xff0c;在其中可以设置开发服务器的端 口 “port” 和后端Web服务的代理“proxy”。

module.exports &＃61; {devServer: {port: 3000,proxy: {&＃39;/api&＃39;: {target: &＃39;http://localhost:9090&＃39;, // target host},}}
};


如上所示&＃xff0c;当我们请求 “localhost:3000/api/xxx” 时&＃xff0c;请求被代理到了 “http://localhost:9090/api/xxx”&＃xff0c; 这样前后端就不存在跨域问题了。

2.2 使用 axois 组件请求后端数据

&＃xff08;1&＃xff09;Promise与fetch API

传统的静态网页是通过XMLHttpRequest对象实现对后端数据的异步请求的&＃xff08;例如jQuery的$.ajax)&＃xff0c;请 求成功后需要执行回调函数。

这种传统的回调在复杂的使用环境中往往会一个接一个的嵌套&＃xff0c;让代码陷入难以维护的“Callback地 狱”。新一代的Javascript&＃xff08;ES6&＃xff09;&＃xff0c;不再建议使用XMLHttpRequest&＃xff0c;而是用一种叫Promise的方式组织 代码&＃xff0c;让我们不用陷入到回调的连环套中&＃xff0c;而是用平面的方式来处理所有回调。新一代的浏览器中都支 持一个名为fetch的API方法&＃xff0c;可以实现Promise方式的请求。

 &＃xff08;2&＃xff09;axios组件

fetch API虽然基于Promise已经很好用了&＃xff0c;但fetch功能还是过于原始&＃xff0c;在实际应用中我们可能还需要一 些拦截器等扩展模块。

为此 vue 的作者推荐我们使用一个名为 axios 的Javascript扩展包来实现后台请 求功能。axios有良好的Promise和拦截器机制。

2.3 axios的使用

axios的详细使用请参考互联网 https://www.npmjs.com/package/axios&＃xff0c;这里只是简单介绍。

&＃xff08;1&＃xff09;为Vue项目添加axios

在项目根目录中执行以下Node指令&＃xff1a; 

vue add axios

&＃xff08;2&＃xff09;axios基本用法

&＃xff08;3&＃xff09;axios的拦截器

axios可以在&＃xff08;组件的&＃xff09;请求或相应处理的之前插入拦截器&＃xff0c;统一处理异步请求中的公共问题。

例如我们可以在react程序入口“index.js”中添加如下代码&＃xff0c;统一在请求发出前添加jwt请求头&＃xff0c;或者在响 应出错时定位到页面。 

import axios from &＃39;axios&＃39;;
//请求前处理
axios.interceptors.request.use(config &＃61;> {const token &＃61; window.localStorage.getItem("jwt‐token");if(token)config.headers&＃61;{&＃39;Authorization&＃39;: &＃39;Bearer &＃39;&＃43;token};return config;},error&＃61;>{return Promise.reject(error);}
);
//响应前处理
axios.interceptors.response.use(response &＃61;> {return response;},error &＃61;> {const httpCode &＃61; error.response.status;if(httpCode>&＃61;400 && httpCode<600){window.location.href&＃61;"/error";}return Promise.reject(error);}
);


2.4 在项目中实现请求

下面演示了ProductList组件中如何向后端请求商品信息。