vue-router 단일 페이지 라우팅에 대한 자세한 설명-JS 튜토리얼-php.cn

vue-router 단일 페이지 라우팅에 대한 자세한 설명

怪我咯

풀어 주다： 2017-07-04 15:04:03

원래의

1927명이 탐색했습니다.

이 글은 주로 vue-router 단일 페이지라우팅 관련 정보를 자세하게 소개하고 있습니다. 참고할만한 가치가 있으니 관심있는 친구들이 참고하시면 됩니다.

vue에는 vue-router라는 클래스 라이브러리가 사용됩니다. 단일 페이지 라우팅의 경우. 라우팅은 일반적으로 네 단계로 나뉩니다.

루트 구성 요소 vue.extend() 준비
컨텐츠 라우팅용 템플릿 준비
새 VueRouter() 라우팅 준비;
라우팅 시작 start(App,'#box'); //첫 번째 매개변수는 준비된 루트 컴포넌트, 두 번째 매개변수는 직접 정의한 id에 번들될 위치
다운로드 주소 github의 vue-router:
https://

루트 점프를 위한 간단한 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <p id="box">
      <ul>
        <li>
          <a v-link="{path:&#39;/home&#39;}">我是第一个a</a>
        </li>
        <li >
          <a v-link="{path:&#39;news&#39;}">我是第二个a</a>
        </li>
      </ul>
      <p>
        <router-view></router-view>
      </p>
    </p>
  </body>
  <script>
    //1.准备一个根组件
    var App=Vue.extend();
    
    //2.Home News 组件准备
    var Home=Vue.extend({
      template:&#39;<h3>我是第一个a的内容页</h3>&#39;
    });
    
    var News=Vue.extend({
      template:&#39;<h3>我是第二个a的内容页</h3>&#39;
    })
    
    //3.准备路由
    var router = new VueRouter();
    
    //4.关联
    
    router.map({
      &#39;home&#39;:{
        component:Home
      },
      &#39;news&#39;:{
        component:News
      }
    })
    
    //5.启动路由
    
    router.start(App,&#39;#box&#39;);
  </script>
</html>

로그인 후 복사

위 내용은 vue-router 단일 페이지 라우팅에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!