vue-router 2.0 기초 실천 강좌

머리말
Vue.js 의 큰 특징 은 단일 페이지 응용 을 구축 하 는 것 이 매우 편리 하 다 는 것 이다.단일 페이지 응용 을 편리 하 게 구축 하려 면 경로 가 없어 서 는 안 된다.vue-router 는 vue 가 공식 적 으로 제공 하 는 경로 구조 이다.본 고 는 주로 Vue-router 2.0 과 관련 된 내용 을 소개 하고 여러분 께 참고 학습 을 제공 합 니 다.다음은 상세 한 소 개 를 살 펴 보 겠 습 니 다.
1.기초 용법:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <!--    router-link      . --> 
  <!--      `to`       . --> 
  <!-- <router-link>           `<a>`    --> 
  <router-link to="/foo">Go to Foo</router-link> 
  <router-link to="/bar">Go to Bar</router-link> 
 </p> 
 <!--      --> 
 <!--                --> 
 <router-view></router-view> 
</div> 
 
<template id='foo'> 
 <p>this is foo!</p> 
</template> 
<template id='bar'> 
 <p>this is bar!</p> 
</template> 

// 1.   （  ）  。 
//         import    
const Foo = { template:'#foo' }; 
const Bar = { template:'#bar' }; 
// 2.      
//             。   "component"     
//    Vue.extend()         ， 
//   ，          。 
const routes = [ 
 { path: '/foo', component: Foo }, 
 { path: '/bar', component: Bar } 
]; 
// 3.    router   ，    `routes`    
//            ,          。 
const router = new VueRouter({ routes:routes }); 
// 4.         。 
//       router         ， 
//               
const app = new Vue({ router:router }).$mount('#app'); 

2.동적 경로 일치:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo/post/123">Go to Foo</router-link> 
  <router-link to="/user/bar/post/456">Go to Bar</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <p>User:{{ $route.params.id }},Post:{{$route.params.post_id}}</p> 
</template> 

// 1.     。 
const User = { 
 template:'#user', 
 watch:{ 
  '$route'(to,from){ 
   console.log(' '+from.params.id+' '+to.params.id); 
  } 
 } 
}; 
// 2.        (         ) 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id/post/:post_id',component:User } 
 ] 
}); 
//3.          
const app = new Vue({ router:router }).$mount('#app'); 

3.포 함 된 경로:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
  <router-link to="/user/foo/profile">Go to profile</router-link> 
  <router-link to="/user/foo/posts">Go to posts</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <div> 
  <h2>User:{{ $route.params.id }}</h2> 
  <router-view></router-view> 
 </div> 
</template> 
 
<template id="userHome"> 
 <p>  </p> 
</template> 
 
<template id="userProfile"> 
 <p>  </p> 
</template> 
 
<template id="userPosts"> 
 <p>    </p> 
</template> 

// 1.     。 
const User = { 
 template:'#user' 
}; 
const UserHome = { 
 template:'#userHome' 
}; 
const UserProfile = { 
 template:'#userProfile' 
}; 
const UserPosts = { 
 template:'#userPosts' 
}; 
// 2.        
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User, 
   children:[ 
    //   /user/:id     ， 
    // UserHome       User   <router-view>   
    { path: '', component: UserHome}, 
    //   /user/:id/profile     ， 
    // UserProfile       User   <router-view>   
    { path:'profile', component:UserProfile }, 
    //   /user/:id/posts      
    // UserPosts       User   <router-view>   
    { path: 'posts', component: UserPosts } 
   ] 
  } 
 ] 
}); 
//3.          
const app = new Vue({ router:router }).$mount('#app'); 

4.프로 그래 밍 방식 의 경로:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <h2>User:{{ $route.params.id }}</h2> 
</template> 
 
<template id="register"> 
 <p>  </p> 
</template> 

// 1.     。 
const User = { 
 template:'#user' 
}; 
const Register = { 
 template:'#register' 
}; 
// 2.        
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User }, 
  { path:'/register', component:Register } 
 ] 
}); 
//3.          
const app = new Vue({ router:router }).$mount('#app'); 
 
//4.router.push(location) 
router.push({ path: 'register', query: { plan: 'private' }}); 

5.명명 경로:

<div id="app"> 
 <h1>Named Routes</h1> 
 <p>Current route name: {{ $route.name }}</p> 
 <ul> 
  <li><router-link :to="{ name: 'home' }">home</router-link></li> 
  <li><router-link :to="{ name: 'foo' }">foo</router-link></li> 
  <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li> 
 </ul> 
 <router-view class="view"></router-view> 
</div> 
 
<template id='home'> 
 <div>This is Home</div> 
</template> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template> 

const Home = { template: '#home' }; 
const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { path: '/', name: 'home', component: Home }, 
  { path: '/foo', name: 'foo', component: Foo }, 
  { path: '/bar/:id', name: 'bar', component: Bar } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app'); 

6.이름 보기:

<div id="app"> 
 <router-link to="/">Go to Foo</router-link> 
 <router-view class="view one"></router-view> 
 <router-view class="view two" name="a"></router-view> 
 <router-view class="view three" name="b"></router-view> 
</div> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template> 
 
<template id='baz'> 
 <div>This is baz</div> 
</template> 

const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
const Baz = { template: '#baz' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { 
   path: '/', 
   components: { 
    default:Foo, 
    a:Bar, 
    b:Baz 
   } 
  } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app'); 

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.