[노트] vue-router의 루트 전달 매개 변수
1. 라벨에 있는 to를 통해 전참
：
<router-link :to="{name:xxx, params: {key:value}}">valueStringrouter-link>
PS： to ，
name： name 。 ， 。
params： ， ， 。
：
（1） src/components/Home.vue ：
<router-link :to="{name: 'one', params:{username:'test123'}}"> 1router-link>
（2） src/router/indes.js ， name：
{
path:'one', // 1
name: 'one', // -
component:One}
（3） src/components/One.vue ， ：
<h2>{{$route.params.username}}h2>2. URL에서 매개 변수 전달
1 （1） ， src/router/index.js ：
2
3 {
4 path:'/home/two/:id/:name', // 2
5 component:Two},
6 （2） ， src/components/Two.vuez ：
7
8 <p>ID：{{ $route.params.id}}p><p> ：{{ $route.params.name}}p>
9 （3） ， src/components/Home.vue ：
10
11 <router-link to="/home/two/1/ "> 2router-link>
12 PS：to ， 。
13 （4） ， ， ：
14
15 {
16 path:'/home/two/:id(\\d+)/:name', // 2
17 component:Two}3. 프로그래밍식 내비게이션-params 전달 매개 변수
참고: 이 방법은 브라우저의 주소 표시줄에 매개 변수가 표시되지 않으며 페이지를 새로 고치면 매개 변수를 가져올 수 없습니다.
개선 방법은 1부의 코드를 다음과 같이 변경합니다.
1 //
2 <template>
3 <button @click="toThreePage"> 3-params button>
4 template>
5
6
7 scriptmethods: {
8 toThreePage() {
9 this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
10 }}
11
12
13
14
15 //
16 <p>ID：{{ $route.params.id}}p><p> ：{{ $route.params.name}}p>4. 프로그래밍식 내비게이션-query 전달 매개 변수
주의: 동적 루트는query 전달 파라미터를 사용하여 브라우저 주소 표시줄에 표시됩니다. 다음 링크는/home/three입니까?id=1&name=zhangsan
//부모 페이지 3-params전참scriptmethods: {toThreePage() {this.$router.push({path:'/home/three',query:{id:1,name:'zhangsan'})}}
//하위 페이지 ID: {{$route.query.id} 이름: {{$route.query.name}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
