爬過得那些坑

前言：在整個(gè)Vue的過程中，遇到了不少坑。查找不同的資料，把這些坑給填了，記錄下這些坑，以及解決辦法。

一、Http請(qǐng)求的那些坑

1.不支持http請(qǐng)求

表現(xiàn)為：程序啟動(dòng)正常，點(diǎn)擊按妞不跳轉(zhuǎn)，后臺(tái)無響應(yīng)，瀏覽器調(diào)試出現(xiàn)

Uncaught TypeError: Cannot read property 'post' of undefined

解決辦法：添加vue-resource支持，在main.js添加

import VueResource from 'vue-resource' Vue.use(VueResource);

2.post請(qǐng)求，后臺(tái)接收參數(shù)為null

表現(xiàn)為：后臺(tái)響應(yīng)但是參數(shù)為null，正確的登陸失效，調(diào)試時(shí)，參數(shù)為from object

解決辦法：http請(qǐng)求中，添加

{emulateJSON:true}

全部的Http請(qǐng)求部分代碼為

_this.$http.post('http://localhost:8080/person/login', { username: _this.username, password: _this.password } ,{emulateJSON:true} ) .then(function (response) { var errorcode = response.data.code; if (errorcode == "200") { _this.$router.push( { path: '/HelloWorld', query: { user: response.data.data, } }); } else { _this.$router.push({ path: '/Fail' }); } }) .catch(function (error) { console.log(error); });

3、正確處理后，跳轉(zhuǎn)到空頁面

原因：路由的url配置有問題，注意組件的引用的對(duì)應(yīng)關(guān)系以及path的路徑問題

4.Request請(qǐng)求變成Options

解決辦法：設(shè)置頭格式

http: { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} },

二、Vue視圖之間的跳轉(zhuǎn)實(shí)現(xiàn)

1.引用router組件

2.在router.js添加對(duì)應(yīng)的view，以及相對(duì)應(yīng)的path的配置

3.this.$router.push({path:'url'})

4.可參照上文的Http請(qǐng)求部分代碼

三、Vue跳轉(zhuǎn)傳遞參數(shù)

采用編程式的實(shí)現(xiàn)方式

傳遞參數(shù)

_this.$router.push( { path: '/HelloWorld',//跳轉(zhuǎn)的路徑 query: {//query 代表傳遞參數(shù) user: response.data.data,//參數(shù)名key,以及對(duì)應(yīng)的value } });

接收參數(shù)

this.$route.query.user

user代表的參數(shù)名，不但可以傳遞單個(gè)參數(shù)，也可以傳遞對(duì)應(yīng)，解析的方式user.屬性

四、實(shí)例，登陸頁面的Vue代碼

<template> <div class="login"> {{ message }}<br/> <input v-model="username" placeholder="用戶名"><br/> <input v-model="password" placeholder="密碼"><br/> <button v-on:click="login">登陸 </button> </div> </template> <script> export default { name: "login", data() { return { message: 'Vue 登陸頁面', username: '', password: '' } }, http: { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} }, methods: { login: function () { var _this = this; console.log(_this.username+_this.password); _this.$http.post('http://localhost:8080/person/login', { username: _this.username, password: _this.password } ,{emulateJSON:true} ) .then(function (response) { var errorcode = response.data.code; if (errorcode == "200") { _this.$router.push( { path: '/HelloWorld', query: { user: response.data.data, } }); } else { _this.$router.push({ path: '/Fail' }); } }) .catch(function (error) { console.log(error); }); } } } </script> <style scoped> </style> 本文作者：shenbug 本文發(fā)布時(shí)間：2018年03月13日 本文來自云棲社區(qū)合作伙伴CSDN，了解相關(guān)信息可以關(guān)注csdn.net網(wǎng)站。

總結(jié)

以上是生活随笔為你收集整理的前后端分离之Vue(三)爬过得那些坑的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。