温馨提示×

vuejs框架路由如何传值

发布时间:2021-09-28 09:37:30 来源:亿速云 阅读:77 作者:小新 栏目:web开发

这篇文章给大家分享的是有关vuejs框架路由如何传值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

vuejs框架路由传值的方法:1、直接调用“$router.push(...)”语句实现携带参数进行跳转传值;2、利用axios传值,可调用“this.$axios.get(...)”语句来传值。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

总结一下Vue中的 路由传值 ,其中涉及了 axios 的使用方法

在使用的时候容易把这几种方法搞混

方式一

组件传值

对应的路由配置:

{
	 path: '/detail/:id',
	 name: 'Detail',
	 component: Detail
}

注:一定要在路由后面加上/:id,id 只是一个参数名,无所谓,但是需要与传递和接收时的参数名保持一致

直接调用$router.push实现携带参数跳转

this.$router.push({ path:`/detail/${id}` })

注:在跳转传参时,path后面是用两个反引号包起来的,而不是双引号或者单引号,并且是使用${}的形式把所需要的参数传过去

在子组件中进行接收

this.$route.params.id

注:是route,而不是router


如果使用路由属性中的name来确定匹配的路由进行传参的话,需要这样:

对应路由的配置:

{
    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提交,参数不会出现在跳转路径里。


axios传值

当我们需要把前端的数据带到后端接口时
也可以用这种方式进行传值

例如:

前端中调用后端接口的代码:

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传值

如果要在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传值

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请求,这种请求方式是安全的,使用这种方式的话,数据是不会在地址栏中显示的。

感谢各位的阅读!关于“vuejs框架路由如何传值”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部