總結一下Vue中的 路由傳值 ,其中涉及了 axios 的使用方法
在使用的時候容易把這幾種方法搞混前端
對應的路由配置:ios
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
複製代碼
注:必定要在路由後面加上/:id
,id 只是一個參數名,無所謂,可是須要與傳遞和接收時的參數名保持一致數據庫
直接調用$router.push
實現攜帶參數跳轉axios
this.$router.push({ path:`/detail/${id}` })
複製代碼
注:在跳轉傳參時,path
後面是用兩個反引號包起來的,而不是雙引號或者單引號,而且是使用${}
的形式把所須要的參數傳過去後端
在子組件中進行接收api
this.$route.params.id
複製代碼
注:是route
,而不是router
瀏覽器
若是使用路由屬性中的name
來肯定匹配的路由進行傳參的話,須要這樣:安全
對應路由的配置:bash
{
path: '/detail',
name: 'Detail',
component: Detail
}
複製代碼
攜帶參數跳轉:服務器
this.$router.push({
name: 'Detail',
params: {
id: id
}
})
複製代碼
注:這裏不能使用/:id
來傳遞參數了,由於父組件中,已經使用params
來攜帶參數了。
子組件中接收參數:
this.$route.params.id
複製代碼
再次強調,是route
,不是router
用
params
傳參,用name
屬性對應跳轉路徑,相似於post
提交,參數不會出如今跳轉路徑裏。
當咱們須要把前端的數據帶到後端接口時
也能夠用這種方式進行傳值
例如:
前端中調用後端接口的代碼:
this.$axios.get(`http://127.0.0.1:3000/api/user/find/${id}`)
複製代碼
在後端中進行接收:
router.get('/find/:id',(req,res)=>{
//接收
let id = req.params.id
})
複製代碼
注意是get請求
這樣的請求方式是會在地址欄中顯示的
地址欄連接示例:http://127.0.0.1:3000/api/user/find/10
對應的路由配置:
{
path: '/detail',
name: 'Detail',
component: Detail
}
複製代碼
攜帶參數跳轉:
this.$router.push({
path:'/detail',
query:{
id:id
}
})
複製代碼
注:這裏使用的是query
而後在子組件中進行接收:
this.$route.query.id
複製代碼
注:傳遞時參數名必定要保持一致,接收時,不要用params
了,要使用query
進行接收
用
query
傳參,用path
屬性對應跳轉路徑,相似於get
提交,參數是在路徑裏顯示的。
若是要在axios中使用的話,能夠這樣:
例如:
前端調用後端接口代碼:
this.$axios.get(`http://127.0.0.1:3000/api/user/delete?name=${name}&age=${age}`)
複製代碼
其實這樣是和上面再寫一個query
是同樣的,不過這樣更加簡便
注:是用兩個反引號包起來,後面使用的是 ? 號,而不是 /
使用這種方式的話,能夠一次性在地址欄中傳遞多個值,中間用 & 符進行鏈接,是get
請求
由於瀏覽器的地址欄有長度限制,因此若是參數過多時,不建議用這種方式
在後端中進行接收:
router.get('/delete'(req,res)=>{
let name = req.query.name;
let age = req.query.age;
})
複製代碼
注:這裏不要在/delete
後面加東西了,接收的時候用query
的方式進行接收
使用這樣的方式進行傳值,也是會在地址欄中顯示的
地址欄連接示例:http://127.0.0.1:3000/api/user/delete?name=zhangsan&age=10
params
進行傳參,必定要用name
屬性來對應跳轉路徑query
進行傳參,必定要用path
屬性來對應跳轉路徑這裏只說 axios傳值
當咱們調用後端接口要在數據庫中插入數據的時候(添加數據),能夠這樣使用:
前端調用後端接口:
this.$axios.get(`http://127.0.0.1:3000/api/user/add`,{name=this.name,age=this.age`})
複製代碼
等號後面的name和age是你從表單裏獲得的數據,而後保存到了data裏面,而後從data裏面拿出來
在後端進行接收:
router.post('/add',(req,res)=>{
let name = req.body.name;
let age = req.body.age;
})
複製代碼
注:這裏接收時用body
進行接收,是post
請求
通常咱們要向服務器提交數據的時候,都是使用的post
請求,這種請求方式是安全的,使用這種方式的話,數據是不會在地址欄中顯示的。