vue의 SPA 단일 페이지 애플리케이션에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-14 17:08:21
원래의
3916명이 탐색했습니다.

이번에는 vue의 SPA 단일 페이지 애플리케이션에 대해 자세히 설명하겠습니다. vue에서 SPA 단일 페이지 애플리케이션을 사용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

1. SPA

개요 SPA(단일 페이지 애플리케이션)는 완성된 애플리케이션이나 사이트에는 로드해야 하는 코드 조각을 삽입할 수 있는 컨테이너가 하나만 있습니다.

SPA 작동 방식:

예: http://127.0.0.1/index.html#/start

①주소 표시줄의 URL에 따라 전체 페이지를 구문 분석합니다. index.html
  Load index.html

②# 주소 표시줄의 URL을 구문 분석한 후 라우팅 주소에 따라: start
   라우팅 주소에 따라 현재 애플리케이션의 구성에서 라우팅 주소의 구성 객체 를 찾아 템플릿의 페이지 주소를 찾습니다. 라우팅 주소에 해당하는
페이지 주소 로드를 위한 비동기 요청 시작

③요청한 데이터를 지정된 컨테이너에 로드

2. VueRouter

를 통해 SPA를 구현하는 기본 단계 ①해당 vue-router.js를 소개합니다(이 파일을 내 파일에 업로드했습니다)
②코드 조각을 담을 컨테이너 지정

<router-view></router-view>
로그인 후 복사

③비즈니스에 필요한 다양한 컴포넌트 생성
4라우팅 사전 구성
라우팅 주소별 구성 객체(어떤 페이지를 로드할지...)

const myRoutes = [
  {path:'/myLogin',component:TestLogin},
  {path:'/myRegister',component:TestRegister}
  ]
  const myRouter = new VueRouter({
  routes:myRoutes 
  })
  new Vue({
    router:myRouter 
  })
로그인 후 복사

⑤테스트
해당하는 다른 라우팅 주소를 주소 표시줄에 입력하여 해당


 
 
 
  

  
 
 
 

    

{{msg}}

    <router-view></router-view>   

  <script>     var testLogin = Vue.component("login",{       template:`         <p>           <h1>这是我的登录页面</h1>         </p>       `     })     var testRegister = Vue.component("register",{       template:`         <p>           <h1>这是我的注册页面</h1>         </p>       `     })     //配置路由词典     //对象数组     const  myRoutes =[     //当路由地址:地址栏中的那个路径是myLogin访问组件     //组件是作为标签来用的所以不能直接在component后面使用     //要用返回值        //path:''指定地址栏为空:默认为Login页面         {path:'',component:testLogin},       {path:'/myLogin',component:testLogin},       {path:'/myRegister',component:testRegister}     ]     const myRouter = new VueRouter({       //myRoutes可以直接用上面的数组替换       routes:myRoutes     })     new Vue({       router:myRouter,       //或者:       /*         router:new VueRouter({             routes:[               {path:'/myLogin',component:testLogin},       {path:'/myRegister',component:testRegister}             ]         })       */       el:"#container",       data:{         msg:"Hello VueJs"       }     })   </script>  
로그인 후 복사


 
 
 SPA练习
  
  
 
 
 

    

{{msg}}

    <router-view></router-view>   

  <script>   /*     需要大家创建一个SPA,这个SPA有3个组件,分别对应的是collect/detail/order     功能需求:     在地址栏中路由地址是:     /myColllect --> 收藏页组件     /myDetail --> 详情页组件     /myOrder --> 订单页组件   */   /*     1、引入js文件     2、创建三个组件,需要返回值     3、路由词典配置(三小步)const myRoutes、const myRouter、router:myRouter,     4、指定一个盛放代码片段的容器           &lt;router-view&gt;&lt;/router-view&gt;   */     var testCollect = Vue.component("collect",{       template:`         <p>           <h1>这是收藏页</h1>         </p>       `     })     var testDetail = Vue.component("detail",{       template:`         <p>           <h1>这是详情页</h1>         </p>       `     })     var testOrder = Vue.component("order",{       template:`         <p>           <h1>这是订单页</h1>         </p>       `     })     const myRoutes = [         {path:"",component:testCollect},         {path:"/myColllect",component:testCollect},         {path:"/myDetail",component:testDetail},         {path:"/myOrder",component:testOrder},     ]     const myRouter = new VueRouter({       routes:myRoutes     })     new Vue({       router:myRouter,       el:"#container",       data:{         msg:"Hello VueJs"       }     })   </script>  
로그인 후 복사

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 주의하세요. PHP 중국어 웹사이트 기사에 다른 관련 주제가 있습니다!

추천 자료:

mint-ui loadmore 풀업 로딩과 풀다운 새로 고침 간의 충돌을 처리하는 방법

WeChat 애플릿이 서버에 사진을 업로드하는 방법

위 내용은 vue의 SPA 단일 페이지 애플리케이션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿