vue 학습 의 Vue-Outer 용법 실례 분석
5468 단어 vueVue-Router
Vue-router 는 공유 기 와 같 습 니 다.구성 요소(components)를 경로(routes)에 표시 한 후
1.vue-router 를 사용 하 는 절차
//1、
const Link1={template:'#link1'};
const Link2={template:'#link2'};
const Link3={template:'#link3'};
//2、
const routes=[
{
path:'/link1', //
component:Link1, //
children:[
{
path:'intro', // /link1/intro
component:{template:'#ariesIntro'},
name:'ariesIntro', //
},
{
path:'feature',
component:{template:'#ariesFeature'},
},
{path:'/',redirect:'intro'}
]
},
{path:'/link2',component:Link2},
{path:'/link3',component:Link3},
{path:'/',redirect:'/link1'} // ， /link1
];
//3、 router
const router = new VueRouter({
routes // ， routes: routes
});
// 4、 。
const app = new Vue({
router
}).$mount('#app'); // id app div
페이지 에서 경로 인 터 페 이 스 를 호출 합 니 다.
<div class="col-lg-offset-2 col-lg-2">
<!-- router-link . -->
<!-- `to` . -->
<router-link class="list-group-item" :to="{name:'ariesIntro'}"> </router-link>
<router-link class="list-group-item" to="/link2"> </router-link>
<router-link class="list-group-item" to="/link3"> </router-link>
</div>
<div class="col-lg-6">
<div class="panel">
<div class="panel-body">
<!-- ， -->
<router-view></router-view>
</div>
</div>
</div>
모든 경로 에 있 는 children 배열 속성 을 통 해 모든 경로 에 하위 경 로 를 재 설정 할 수 있 습 니 다.하위 경로 의 경 로 는 부모 경로 디 렉 터 리 에 기반 한 것 이 고 기본 경 로 는 중첩 됩 니 다.예 를 들 어 위 에 링크 1 에 intro 와 feature 두 개의 키 길 을 추가 하고 링크 1 템 플 릿 에서 두 개의 키 길 을 사용 합 니 다.
<template id="link1">
<div>
<h3> </h3>
<ul class="nav nav-tabs">
<li class="active">
<router-link to="/link1/intro"> </router-link>
</li>
<li><router-link to="/link1/feature"> </router-link></li>
</ul>
<div class="tab-content">
<router-view></router-view>
</div>
</div>
</template>
3.동적 경로
경로 에 변 수 를 연결 하여 서로 다른 변수 값 에 따라 서로 다른 페이지 로 이동 시 킵 니 다.예 를 들 어 path:"goods/:goods Id"를 goods Id 가 15 일 때/goods/15 페이지 로 이동 합 니 다.
4.프로 그래 밍 경로
js 코드 를 통 해 페이지 의 점프 와 전송 값 을 제어 합 니 다.예 를 들 어 button 바 인 딩 이벤트 jmp,methods 에서 이 루어 집 니 다.
jump(){
this.$router.push('/cart?goodsId=123')
}
메모:점프 는$router 이 고 수신 인 자 는$route 입 니 다.
<span> ID：{{$route.query.goodsId}}</span>
5.명명 경로
경로 가 너무 길 면 name 속성 으로 경로 이름 을 지 을 수 있 습 니 다.
또한 보 기 를 명명 할 수 있 습 니 다.구성 요 소 를 지정 한 보기 위치 로 렌 더 링 할 수 있 습 니 다.예 를 들 어 부모 구성 요소 에 기본 보기 와 두 개의 이름 보기 가 있 습 니 다.왼쪽,오른쪽:
<router-view></router-view>
<router-view class="left" name="cartview"></router-view>
<router-view class="right" name="imgview"></router-view>
new Router({
routes: [
{
path: '/',
components:{
default:GoodsList,
cartview:Cart,
imgview:Image
}
}
본 고 에서 말 한 것 이 여러분 vue.js 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
