집 > 기사 > 웹 프론트엔드 > vue의 SPA 단일 페이지 애플리케이션에 대한 자세한 설명

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

php中世界最好的语言원래의: 2018-04-14 17:08:213860검색

이번에는 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 중국어 웹사이트 기사에 다른 관련 주제가 있습니다!

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

관련 기사