實例講述vue中SPA單頁面應用程式

本文主要為大家詳細介紹了vue中SPA單頁應用程式的相關資料，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助大家。

一、SPA的概述

SPA（single page application）單頁面應用程序，在一個完成的應用或站點中，只有一個完整的html頁面，這個頁面有一個容器，可以把需要載入的程式碼片段插入到該容器中。

SPA的工作原理：

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

#①根據網址列中url解析完整的頁面：index.html
　　載入index.html

②根據網址列中url解析#後的路由位址： start
#　　根據路由位址，去在目前應用程式的設定中找該路由位址的設定物件去尋找該路由位址所對應的範本的頁面位址
　　發起非同步請求載入該頁面位址

##③把請求來的資料載入到指定的容器中

二、透過VueRouter來實作一個SPA的基本步驟

①引進對應的vue-router.js (該檔案我已經上傳到我的檔案)

②指定一個盛放程式碼片段的容器

#

<router-view></router-view>

③建立業務所需的各個元件

④設定路由字典
每一個路由位址的設定物件（要載入哪個頁面...）

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:&#39;&#39;指定地址栏为空：默认为Login页面
　　　　　　　　{path:&#39;&#39;,component:testLogin},

      {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,component:testRegister}
    ]

    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的数组替换
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      //或者：
      /*
        router:new VueRouter({
            routes:[
              {path:&#39;/myLogin&#39;,component:testLogin},
      {path:&#39;/myRegister&#39;,component:testRegister}
            ]
        })
      */
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 

 
 
 
  
  
 
 
 

    
{{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>
 

相關推薦：

簡單了解vue2 單頁如何設定網頁title

關於Vue.js如何操作單一頁多路由區域的實例分析

H5單一頁面手勢滑軌切換原理

以上是實例講述vue中SPA單頁面應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！