찾다
웹 프론트엔드JS 튜토리얼매개변수를 전달하기 위해 jquery 및 params를 사용하는 vue 라우터에 대한 자세한 설명

이 글에서는 Vue Router에서 매개변수를 전달하기 위해 쿼리와 매개변수를 사용하는 것의 용도와 차이점을 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

앞서 작성:

매개변수 전달은 프런트엔드에서 자주 사용되는 작업입니다. 많은 시나리오에서 이전 페이지의 매개변수가 필요합니다. 이 글에서는 vue 라우터가 매개변수를 전달하는 방법과 일부를 자세히 소개합니다. 작은 세부 사항. 도움이 필요한 친구들은 참고할 수 있습니다. 좋아요를 누르거나 팔로우를 하시면 모두에게 도움이 되기를 바랍니다.

Vue 라우터는 매개변수를 어떻게 전달하나요?

매개변수와 쿼리가 무엇인가요?

params:/router1/:id,/router1/123,/router1/789, 여기의 ID는 params라고 합니다.

query:/router1?id=123,/router1?id=456, 여기의 ID는 query라고 합니다. .

Routing 인터페이스:

router.js:

여기에서 params 메소드를 사용하여 라우팅을 설정하는 경우 경로 뒤에 매개변수 이름을 추가해야 하며, 매개변수를 전달할 때 매개변수 이름은 설정된 매개변수를 따라야 합니다. 경로 이름 후. 쿼리 방식을 사용하면 이런 제한이 없고 점프에서 바로 사용할 수 있다.

참고: 경로에 매개변수를 쓰지 않으면 전달할 수 있지만 매개변수는 URL에 표시되지 않으며 다른 페이지로 이동하거나 페이지를 새로 고치면 매개변수가 손실됩니다. (다음과 같이) 그림에 표시된 것처럼 이 매개변수에 의존하는 http 요청 또는 기타 작업은 실패합니다.

위의 라우팅 매개변수에 주의하세요. 라우팅에 id2를 설정하지 않았으므로 프로젝트에서 새로고침하면 id2가 사라지게 됩니다. 새로 고치지 마세요.

구성요소 1:

<template>
 <p>
 </p>
<h1 id="从这个路由传参到别的路由">从这个路由传参到别的路由</h1>
 <router-link>
  router-link跳转router1
 </router-link>
 
</template>
<script>
export default {
 name: &#39;app_page&#39;,
 data () {
 return {
  status:110,
  status2:120,
  status3:119
 }
 },
}
</script>

프로그래밍 방식 탐색 점프:

위의 라우터 링크 전송 매개변수는 라우터 문서의 프로그래밍 방식 탐색을 사용하여 매개변수를 점프할 수도 있습니다.

this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
//编程跳转写在一个函数里面,通过click等方法来触发

두 가지 매개변수 전송 효과는 완전히 동일합니다. 프로그래밍 방식 탐색을 사용하면 승인 여부, 로그인 여부 등을 판단할 수 있습니다. 이에 대해 잘 모르는 친구는 프로그래밍 방식 탐색을 건너뛰어도 됩니다. 나중에 논의할 것.

컴포넌트 2:

<template>
 <p>
 </p>
<h1 id="接收参数的路由">接收参数的路由</h1>
 <h1 id="params-id-route-params"> params.id:{{ $route.params }}</h1>
 <h1 id="query-status-route-query-queryId">query.status:{{ $route.query.queryId }}</h1>
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
 
</template>

매개변수 전달은 비교적 간단합니다. 위 컴포넌트의 사용 방법을 따르면 성공적으로 전달할 수 있습니다.

팁: 경로의 매개변수를 얻으려면 뒤에 r 없이 $route를 사용하세요.

매개변수로 매개변수를 전달하는 것과 쿼리로 매개변수를 전달하는 것의 차이점은 무엇인가요?

1. 사용법

지금은 쿼리에 경로를 입력해야 하고, 매개변수에 이름을 입력해야 하며, 수신된 매개변수는 비슷합니다. , 각각 this.$ Route.query.name 및 this.$route.params.name입니다.

매개변수 수신 시 이미 $router가 아닌 $route라는 점에 유의하세요! !

2. 표시된

쿼리는 ajax의 매개변수 가져오기와 더 비슷하지만 params는 간단히 말해서 브라우저 주소 표시줄에 매개변수를 표시하지만 후자는

쿼리를 표시하지 않습니다. :

   

params:

3. Params는 경로의 일부이며 반드시 있어야 합니다. query는 URL 뒤에 붙은 매개변수이므로 존재하지 않아도 상관없습니다.

경로에 매개변수가 설정되면 매개변수는 경로의 일부가 됩니다. 경로에 매개변수를 전달하는 매개변수가 있지만 점프 중에 이 매개변수가 전달되지 않으면 점프가 실패하거나 페이지에 내용이 없습니다.

예: /router1/:id

<router-link>正确</router-link>
<router-link>错误</router-link>

4로 이동합니다. 매개변수와 쿼리가 설정되지 않은 경우에도 매개변수를 전달할 수 있습니다. 매개변수가 설정되지 않은 경우 페이지를 새로 고치거나 매개변수를 반환하면 손실됩니다. 위

관련 권장 사항:

C#

vue.js의 세 가지 키워드 매개변수 Ref 및 out에 대한 자세한 소개 구성 요소

vue.js 부모에서 자식으로 매개 변수를 전달하는 방법 컴포넌트 매개변수 전달 구현 방법

위 내용은 매개변수를 전달하기 위해 jquery 및 params를 사용하는 vue 라우터에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

React Router使用指南:如何实现前端路由控制React Router使用指南:如何实现前端路由控制Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何实现前端路由控制随着单页应用的流行,前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库,提供了丰富的功能和易用的API,使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法,并提供一些具体的代码示例。安装ReactRouter首先,我们需

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

jquery怎么修改元素的title属性jquery怎么修改元素的title属性Apr 20, 2022 pm 07:00 PM

修改方法:1、用attr(),可设置被选元素的指定属性的值,语法“元素对象.attr("title","新值")”,新值将覆盖旧值;2、用prop(),可为匹配元素集合设置指定属性值,语法“元素对象.prop("title","新值")”。

jquery怎么根据id改变元素值jquery怎么根据id改变元素值Apr 20, 2022 pm 06:13 PM

jquery根据id改变值的方法:1、给元素设置id属性;2、使用“$("#id属性值")”语句获取指定元素对象;3、使用“元素对象.html("新值")”、“元素对象.text("新值")”或“元素.val("新值")”语句来修改元素值。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구