vue中SPA單頁面應用程序詳解

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

這篇文章主要為大家詳細介紹了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
　　根據路由地址，去在當前應用的配置中找該路由地址的配置對象去查找該路由地址所對應的模板的頁面地址
　　發(fā)起異步請求加載該頁面地址

③把請求來的數據加載到指定的容器中

二、通過VueRouter來實現一個SPA的基本步驟

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

<router-view></router-view>

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

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

⑤測試
在地址欄中輸入對應的不同的路由地址確認是否能夠加載對應的<!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>
      `
    })
    //配置路由詞典
    //對象數組
    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>
 </body>
</html>

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>SPA練習</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個組件，分別對應的是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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: