1 Star 1 Fork 0

WFS/vue

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
router.txt 2.23 KB
一键复制 编辑 原始数据 按行查看 历史
wangfeng 提交于 2021-08-27 23:52 . 1
前端路由总结:
query方式: 参数拼接是将query拼接至url ?之后 url?id=12345&age=12
①<router-link :to> = "{name:'W',query:{id:'12345',age:'12'}}"
对应routes:{
path:'/任意',
name:'W'
components:W
}
②<router-link :to> = "{path:'/W',query:{id:'12345',age:'12'}}"
对应routes:{
path:'/W',
name:'任意'
components:W
}
前端接收参数方式:this.$route.query.id||age
params方式:url/W/12345/12
这里只能使用name
<router-link :to> = "{name:'W',params:{id:'12345',age:'12'}}"
对应routes:{
path:'/W/:id/:age',
name:'W'
components:W
}
前端接收参数方法:this.$route.parmas.id||age
使用this.$router.push进行路由跳转
①query方式
this.$router.push({
path:'/profile',
query:{
name:"ws",
height:159,
age:26
}
对应routes:{
path: '/profile',
name: '任意',
component:profile,
}
this.$router.push({
name:'sss',
query:{
name:"ws",
height:159,
age:26
}
对应routes:{
path: '任意',
name: 'sss',
component:profile,
}
②params方式
this.$router.push({
//这个name是组件的name属性对应的名字 且只能用name
name:'User',
params:{
id:this.userId
}
})
对应routes:
{
path: '/user/:id',
name: 'User',
component:User,
}
后端路由:
①req.query
axios.get(`/api/?id=1234`)
或者
axios.get(`/api`,{ params:{id:'1234' })
接收方式:req.query
后端路由:
router.get('/api',function(req,res){
console.log(req.query.id)
.......
})
②req.params
axios.get(`/api/1234`)
后端路由:
router.get('/api/:id',function(req,res){
console.log(req.params.id)
})
③req.body
//post直接传一个对象 data
axios.post(`/api`,{ id:'1234' })
接收方式req.body
后端路由:
router.get('/api',function(req,res){
console.log(req.body.id)
.......
})
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/WFSWFS/vue.git
git@gitee.com:WFSWFS/vue.git
WFSWFS
vue
vue
master

搜索帮助