vue中SPA單頁面應(yīng)用程序詳解

更新時間：2022年08月05日 15:58:43 作者：匿名的girl

這篇文章主要為大家詳細(xì)介紹了vue中SPA單頁面應(yīng)用程序的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、SPA的概述

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

SPA的工作原理：

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

①根據(jù)地址欄中url解析完整的頁面：index.html
　　加載index.html

②根據(jù)地址欄中url解析#后的路由地址： start
　　根據(jù)路由地址，去在當(dāng)前應(yīng)用的配置中找該路由地址的配置對象去查找該路由地址所對應(yīng)的模板的頁面地址
　　發(fā)起異步請求加載該頁面地址

③把請求來的數(shù)據(jù)加載到指定的容器中

二、通過VueRouter來實現(xiàn)一個SPA的基本步驟

①引入對應(yīng)的vue-router.js(該文件我已經(jīng)上傳到我的文件中)
②指定一個盛放代碼片段的容器

<router-view></router-view>

③創(chuàng)建業(yè)務(wù)所需要的各個組件
④配置路由詞典
每一個路由地址的配置對象（要加載哪個頁面...）

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

⑤測試
在地址欄中輸入對應(yīng)的不同的路由地址確認(rèn)是否能夠加載對應(yīng)的<!doctype html>

<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="js/vue.js"></script>
<!-- 引入文件 -->
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
<!--通過router-view指定盛放組件的容器 -->
    <router-view></router-view>
  </div>
  <script>
    var testLogin = Vue.component("login",{
      template:`
        <div>
          <h1>這是我的登錄頁面</h1>
        </div>
      `
    })
    var testRegister = Vue.component("register",{
      template:`
        <div>
          <h1>這是我的注冊頁面</h1>
        </div>
      `
    })
    //配置路由詞典
    //對象數(shù)組
    const  myRoutes =[
    //當(dāng)路由地址：地址欄中的那個路徑是myLogin訪問組件
    //組件是作為標(biāo)簽來用的所以不能直接在component后面使用
    //要用返回值　
　　　　　　//path:''指定地址欄為空：默認(rèn)為Login頁面
　　　　　　　　{path:'',component:testLogin},

      {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
    ]

    const myRouter = new VueRouter({
      //myRoutes可以直接用上面的數(shù)組替換
      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>
 </body>
</html>

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>SPA練習(xí)</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <router-view></router-view>
  </div>
  <script>
  /*
    需要大家創(chuàng)建一個SPA，這個SPA有3個組件，分別對應(yīng)的是collect/detail/order
    功能需求：
    在地址欄中路由地址是:
    /myColllect --> 收藏頁組件
    /myDetail --> 詳情頁組件
    /myOrder --> 訂單頁組件
  */
  /*
    1、引入js文件
    2、創(chuàng)建三個組件,需要返回值
    3、路由詞典配置(三小步)const myRoutes、const myRouter、router:myRouter,
    4、指定一個盛放代碼片段的容器
          <router-view></router-view>
  */
    var testCollect = Vue.component("collect",{
      template:`
        <div>
          <h1>這是收藏頁</h1>
        </div>
      `
    })
    var testDetail = Vue.component("detail",{
      template:`
        <div>
          <h1>這是詳情頁</h1>
        </div>
      `
    })
    var testOrder = Vue.component("order",{
      template:`
        <div>
          <h1>這是訂單頁</h1>
        </div>
      `
    })
    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>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: