vuejs 프레임워크 라우팅에서 값을 전달하는 방법

Vuejs 프레임워크 라우팅 값 전송 방법: 1. "$router.push(...)" 문을 직접 호출하여 값을 전송하기 위해 매개변수를 전달합니다. 2. axios를 사용하여 값을 전송합니다. "this"를 호출할 수 있습니다. .$axios.get(...)" 문을 사용하여 값을 전달합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Axios를 사용하는 Vue의 경로 값 전송을 요약합니다.

메서드 1

컴포넌트 전송 값을 사용할 때 이러한 방법을 혼동하기 쉽습니다.

해당 라우팅 구성:

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

참고: Be 경로 뒤에 /:id를 추가하세요. id는 매개변수 이름일 뿐이므로 상관없지만 전달 및 수신 시 매개변수 이름과 일치해야 합니다./: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

Call $router.push는 매개변수를 사용한 점프를 실현합니다🎜rrreee🎜🎜참고: 매개변수 전달로 점프할 때 path 뒤에는 큰따옴표나 작은따옴표 대신 두 개의 백틱이 오고 필수 매개변수를 전달하기 위한 ${} 형식🎜🎜🎜하위 구성요소에서 수신🎜rrreee🎜🎜참고: router 대신 <code>route 입니다. code>🎜🎜

---

🎜라우팅 속성에서 name을 사용하여 매개변수 전달에 일치하는 경로를 결정하는 경우 다음을 수행해야 합니다. 🎜🎜해당 경로 구성: 🎜rrreee🎜 매개변수를 사용하여 점프: 🎜rrreee🎜🎜 참고: params가 상위 구성 요소에서 사용되었기 때문에 /:id를 사용하여 여기에서 매개변수를 전달할 수 없습니다. 🎜🎜🎜하위 구성 요소에서 수신된 매개변수: 🎜rrreee🎜🎜다시 한 번 말씀드리지만, router가 아니라 route입니다🎜🎜🎜🎜🎜 params를 사용하세요 매개변수를 전달하려면 점프 경로에 해당하는 name 속성을 ​​사용하세요. post 제출과 마찬가지로 매개변수는 점프 경로에 표시되지 않습니다. 🎜🎜🎜

---

axios value transfer🎜🎜프런트엔드 데이터를 백엔드 인터페이스로 가져와야 할 때🎜이 방법을 사용하여 값을 전송할 수도 있습니다🎜 🎜예: 🎜🎜프런트 엔드에서 백엔드 인터페이스를 호출하기 위한 코드: 🎜rrreee🎜백엔드에서 수신: 🎜rrreee🎜🎜get 요청이라는 점에 유의하세요🎜🎜🎜🎜이 요청 메소드는 주소 표시줄에 표시됩니다. 🎜주소 표시줄 링크 예: http://127.0.0.1:3000/api/user/find/10🎜🎜

방법 2🎜

컴포넌트 전송 🎜🎜 값에 해당하는 라우팅 구성: 🎜rrreee🎜 매개변수로 점프: 🎜rrreee🎜🎜참고: 쿼리🎜🎜🎜는 여기서 사용되며 하위 컴포넌트에서 수신됩니다. : 🎜rrreee🎜🎜참고: 전달 시 매개변수 이름이 일관되어야 합니다. 수신 시 params를 사용하지 마세요. >매개변수를 전달하려면 점프 경로에 해당하는 path 속성을 ​​사용하세요. get 제출과 유사하게 매개변수가 경로에 표시됩니다. 🎜🎜🎜

axios 값 전송🎜🎜Axios에서 사용하려면 다음과 같이 하면 됩니다.🎜🎜예:🎜🎜프런트 엔드가 백을 호출합니다. -end 인터페이스 코드:🎜rrreee🎜사실 이것은 위의 또 다른 쿼리를 작성하는 것과 동일하지만 이 방법이 더 쉽습니다🎜🎜🎜참고: 두 개의 백틱으로 묶이고 그 뒤에 ? /🎜🎜🎜🎜 대신 sign을 사용하면 주소 표시줄에 여러 값을 한 번에 전달할 수 있으며 앰퍼샌드를 사용하여 이를 연결하는 get 요청🎜🎜🎜입니다. 🎜브라우저의 주소 표시줄에는 길이 제한이 있으므로 매개변수가 너무 많은 경우 백엔드에서 수신하는 데 이 방법을 사용하지 않는 것이 좋습니다: 🎜rrreee🎜🎜참고: /delete 뒤에 아무것도 추가하지 마세요. 여기에서 쿼리를 통해 수신할 때 를 사용하세요.🎜🎜🎜🎜이 방법을 사용하여 주소 표시줄에도 표시되는 값을 전달하세요.🎜주소 표시줄 링크의 예: http:/ /127.0.0.1:3000/api/user/delete ?name=zhangsan&age=10🎜🎜

특별 알림🎜

• 매개변수를 사용하는 경우 code>를 사용하여 매개변수를 전달하려면 <code>name 속성을 사용하여 점프 경로에 대응해야 합니다.
• query를 사용하여 매개변수를 전달하는 경우 반드시 다음을 사용해야 합니다. 점프 경로에 해당하는 path 속성
li>

방법 3🎜🎜여기서는 값을 전달하는 axios에 대해서만 이야기합니다. 🎜

axios pass value🎜🎜 호출할 때 최종 인터페이스가 데이터베이스에 데이터를 삽입하려고 할 때(데이터 추가) 다음과 같이 사용할 수 있습니다. 🎜🎜프런트 엔드 호출 백엔드 인터페이스: 🎜rrreee🎜등호 뒤의 이름과 나이는 양식에서 가져온 데이터이며, 내부 데이터에 저장한 다음 데이터에서 꺼냅니다.🎜🎜백엔드에서 수신:🎜 rrreee🎜🎜참고: 여기에서 수신할 때 수신하려면 body를 사용하세요. 이는 게시물 요청🎜🎜입니다.

일반적으로 서버에 데이터를 제출할 때 post요청을 사용합니다. 이 방법을 사용하면 데이터가 주소 표시줄에 표시되지 않습니다.

관련 추천: "vue.js Tutorial"

위 내용은 vuejs 프레임워크 라우팅에서 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!