Vue 라우팅 점프 매개변수 전달 및 수신에 대한 자세한 설명

경로 점프

1. 선언적 경로 점프

(매개변수 없음)

router-link 태그를 통해 점프하고 name을 사용하세요. > 또는 path를 사용할 수 있습니다. 이는 dom 구조의 a 태그로 렌더링됩니다.
참고: router-link의 링크는 '/'이며, '/'로 시작하지 않으면 루트 경로에서 시작됩니다. 현재 경로. router-link标签进行跳转，使用name或者path都可以，在dom结构中会被渲染成a标签
注意：router-link中链接如果是’/‘开始就是从根路由开始，如果开始不带’/’，则从当前路由开始。

     <router-link> 
	 <router-link></router-link></router-link>

（带参数）【相关推荐：vue.js视频教程】

注意：
params传参数 (类似post)
路由配置 path: "/home/:id"
不配置path，路由跳转可请求，刷新页面传递的参数会丢失，
配置path，刷新也买你id会被保留

<router-link></router-link>

<router-link></router-link>

获取路由跳转传递的参数：
html 通过 $route.params.id， script 通过this.$route.params.id

2.编程式路由跳转

1.字符串形式

router.push('home')

2.对象形式

router.push({ path: 'home' })router.push({ name: 'user'})

3.函数内调用
（不带参数）

this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})

（query传参）

this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})

html 取参 $route.query.id
script 取参 this.$route.query.id
（params传参）
只可以使用name

this.$router.push({name:'home',params: {id:'1'}})

html 取参$route.params.id， script 取参this.$route.params.id

3.query和params的区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面idrrreee

(매개변수 포함) [관련 권장사항: vue.js 동영상 튜토리얼] 🎜🎜참고:
params전달 매개변수(post와 유사)
라우팅 구성경로: "/home/:id" code ><br> <code>path가 구성되지 않은 경우 경로 점프가 요청될 수 있으며 페이지를 새로 고칠 때 전달된 매개변수가 손실됩니다.
path를 구성합니다. , 새로고침하면 ID도 구매됩니다. 예약됨 🎜rrreeerrreee🎜 경로 점프에 의해 전달된 매개변수를 가져옵니다:
html via $route.params.id this.$route.params.id🎜🎜🎜2. 프로그래밍 방식 경로 점프🎜🎜🎜1. 문자열 형식🎜rrreee🎜2. 함수 내 호출
(매개변수 없음) 🎜rrreee🎜 (query 매개변수 전달) 🎜rrreee🎜html 매개변수 $route.query.id<br><code>script 매개변수 가져오기this.$route.query.id
(params 매개변수 전달)
name🎜rrreee🎜html만 사용할 수 있으며 $route.params.id, script 매개변수를 사용합니다. this.$ Route.params.id🎜🎜🎜3 매개변수를 사용합니다. query와 params🎜🎜🎜query의 차이점 는 get과 유사합니다. 점프 후 페이지 url은 ?id=1와 유사한 매개변수로 연결됩니다. >, 중요하지 않은 것들은 이렇게 전달할 수 있고, 비밀번호 등은 여전히 ​​ 매개변수를 사용합니다. 새로고침 페이지 ID는 여전히 있습니다🎜🎜params는 post. 점프 후 페이지는 <code>url 뒤에 매개변수를 연결하지 않지만 페이지 id는 사라집니다🎜

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