Vue 시리즈 20: router 라우팅
3197 단어 Vue
npm install vue-router --save 2. 사용 단계 1, 정의 루트 구성 요소: VueRouter(): 루트를 만드는 데 사용되는 구축 함수new VueRouter({
routes:[
{//
path:'/about',
component:About
},
{//
path:'/',
redirect:'/about'
}
]
})
2. 라우터 등록
import router from'./router'
new Vue({
router
})
3. 라우팅 구성 요소 태그 사용(1),
GotoXXX export default newVueRouter({
routes:[
{
path:'/',
redirect:'/about'
},
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
2. 라우터 등록:main.js
import Vue from'vue'
import router from'./router'
// vue
newVue({
el:'#app',
router,
render:h=>h(app)
})
3. 라우팅 태그 사용: App.vue
About
Home
4. 네스트된 라우팅
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message
}
]
5. 루트 구성 요소에 데이터 전달 1. 방식 1: 루트 경로 휴대 매개 변수(param 또는query)
(1) 라우팅 경로
{{message.title}}
(2), 구성 라우팅
children:[
{
path: '/home/message/detail/:id',
component: MessageDetail
}
]
(3) 라우팅 구성 요소의 읽기 요청 매개변수
this.$route.params.id2. 방식2: (1),
(2) 라우팅 구성 요소의 요청 매개변수 수신
export default {
props:{
msg: String
}
}
6. 캐시 루트 구성 요소 1, 기본적으로 전환된 루트 구성 요소 대상은 사망하고 방출되며 다시 돌아올 때 다시 생성됩니다. 2. 캐시 루트 구성 요소 대상이 있으면 사용자 체험을 향상시킬 수 있습니다.
7. 프로그래밍 라우팅 네비게이션 1,
this.$router.push(path): 클릭 라우팅 링크(현재 라우팅 인터페이스로 되돌아갈 수 있음) 2, this.$router.replace(path): 새로운 라우팅으로 현재 라우팅 교체(현재 라우팅 인터페이스로 되돌아갈 수 없음) 3, this.$router.back(): 이전 레코드 라우팅 요청(되돌려줌) 4;4, this.$router.go(-1): 이전 레코드 라우팅 요청(되돌려줌): 이전 레코드 라우팅 5,this.$router.go(1): 다음 레코드 라우팅 요청
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
