vue 2.0 루트 의 루트 삽입 예시 상세 설명

머리말
vue 의 중요 한 부분 은 바로 경로 입 니 다.다음은 자신 이 쓴 경로 의 예 로 여러분 에 게 참고 학습 을 제공 합 니 다.다음은 상세 한 소 개 를 보 겠 습 니 다.
방법 은 다음 과 같다.
1.의존 라 이브 러 리 도입 은 더 이상 말 할 필요 가 없다.
2.구성 요소 만 들 기
두 가지 표기 법
간접


 <template id="home">

 <div>

  <h1>Home</h1>

  <p>{{msg}}</p>

 </div>

 </template>


 var About = Vue.extend({

   template: '#about'

  });

직접


  var Out = Vue.extend({

   template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>'

  });

3.router 인 스 턴 스 를 만 들 고'routes'경로 맵 설정 을 전달 합 니 다.


var router = new VueRouter({

   routes: [

   { path: '/  ', component:     },

    { path: '/', component:    }, //      

　　　　　{ path: "*", component:Home }//        <br>　　　　] 

 });

4.루트 인 스 턴 스 를 만 들 고 마 운 트 합 니 다.router 설정 매개 변 수 를 통 해 경로 에 주입 하여 전체 응용 에 경로 기능 이 있 도록 해 야 합 니 다.


var vm = new Vue({

    router: router 

 }).$mount('#app');

전체 데모


<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>hello world</title>

</head>

<body>

 <div id="app">

  <div>

   <!-- 4、<router-link>          `<a>`    ,to          -->

   <router-link to="/home">Go to Home</router-link>

   <router-link to="/about">Go to About</router-link>

   <router-link to="/out">Go to Out</router-link>

  </div>

 

  <!-- 5、      <router-view></router-view>  ，          -->

  <!--           -->

  <router-view></router-view>   

 </div>

  

 <template id="home">

   <div>

    <h1>Home</h1>

    <p>{{msg}}</p>

   </div>

 </template>

 <template id="about">

   <div>

    <h1>about</h1>

    <p>This is the tutorial about vue-router.</p>

   </div>

 </template>

  

   

 

 <!-- 0、      -->

 <script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>

<script src="lib/vue-router.min.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript">

  /* 1、     */

  var Home = Vue.extend({

   template: '#home',

   data: function() {

    return {

     msg: 'Hello, vue router!'

    }

   }

  });

  var About = Vue.extend({

   template: '#about'

  });

  var Out = Vue.extend({

   template: '<div><h1>Out</h1><p>This is the tutorial out vue-router.</p></div>'

  });

 

  // 2.    router   ，    `routes`       

  var router = new VueRouter({

   routes: [

   { path: '/home', component: Home },

    { path: '/about', component: About },

    { path: '/out', component: Out },

    {path: '/', component: Home },//      

   { path: "*", component:Home }//     

   

   ]

  });

 

  // 3.         。      router         ，             

  var vm = new Vue({

    router: router 

  }).$mount('#app');

 

  //   ，       ！

 </script>

</body>

</html>

경로 구성 에 대하 여
routes 맵 을 설정 할 때 children 설정 을 추가 합 니 다.
다음 과 같다.


var router = new VueRouter({

 routes:[

  {path:'/home',component:Home,

   children:[//   

    {path:'news',component:News},

    {path:'change',component:change}    

  ]},

  {path:'/me',component:Me},

  {path:'/',component:Me}

  ]

 　　})

구체 적 인 demo 는 참고GitHub할 수 있 습 니 다.또한 자신 이 최근 에 공부 하고 있 는 아 리 클 라 우 드 에 사진 을 올 리 는 등 점차적으로 업 데 이 트 될 것 입 니 다.잘 부탁드립니다!
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

vue router 학습 의 동적 경로 와 내장 경로 에 대한 상세 한 설명

본 논문 의 읽 기 전 제 는 vue 프론트 프로그램 을 구축 하고 실행 할 수 있다 는 것 이다.만약 에 건축 이 있다 면 참고 할 수 있 는 글 이 있 습 니 다. 동적 경로 가 제 이해 에 따 르 면 페이지 의...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue 2.0 루트 의 루트 삽입 예시 상세 설명

좋은 웹페이지 즐겨찾기