spa (單頁應用程式)
只有一張web頁面的應用。單頁應用程式 (spa) 是載入單個html 頁面並在使用者與應用程式互動時動態更新該頁面的web應用程式。 瀏覽器一開始會載入必需的html、css和j**ascript,所有的操作都在這張頁面上完成,都由j**ascript來控制。因此,對單頁應用來說模組化的開發和設計顯得相當重要。
特點·mvvm:經典mvvm開發模式,前後端各負其責。
·ajax:重前端,業務邏輯全部在本地操作,資料都需要通過ajax同步、提交。
單頁面應用中,檢視的切換需要通過路由實現。
路由的特點
在url中採用#號來作為當前檢視的位址,改變#號後的引數,頁面並不會過載。
如 獲取商品資訊:
獲取使用者資訊:
前端路由根據#後內容的改變,而去請求不同的內容,但是實際訪問的還是那個頁面,因為#後不管如何改變,頁面位址是不變的
注意,路由中path跟元件的一一對應
建立路由的過程
1. 引入路由外掛程式
2.定義元件 每個路由對應乙個元件
仿美團底部導航,建立元件 : 首頁、發現、附近、訂單、我的
3.定義路由表, 乙個路徑對應乙個元件
var routes =[,,
,,]4.建立路由物件
var router = new vuerouter()
5.將router放入new vue中
router-link自動轉為a標籤,對應的內容顯示在router-view
首頁附近
發現訂單
我的分三部完成
涉及檔案:router目錄下index.js和staticrouter.js,以及入口檔案main.js
一: staticrouters.js中**如下:
為了方便管理,靜態路由的配置在單獨檔案管理
// 引入元件寫法一:
const index =() =>
// 引入元件寫法二:
// const index =function()
// 引入元件寫法三:
// import index from './../components/index'
const staticrouters =[
,// 引入元件寫法四:
// },
]export default staticrouters
二: index.js中**如下:
import vue from 'vue'
import vuerouter from 'vue-router'
vue.use(vuerouter)
import staticrouters from './staticrouters'
const router=new vuerouter()
export default router
三: main.js中**如下:
vue的路由及靜態路由和動態路由的區別
1.路由主要分為以下幾點 圖見 靜態路由與動態路由的區別 定義 靜態路由 靜態路由是在路由器中設定固定的路由表 除非網路管理員進行干預,否則靜 態路由表不會發生變化。動態路由 由網路中的路由器之間相互通訊,傳遞路由資訊,利用收到的路由資訊更新路由表的路由方式。使用場景 靜態路由 網路規模不大,拓撲結...
路由 靜態路由
從源主機到目標主機的 過程 源ip保持不變,源mac跟隨傳輸裝置不同而不同 作用是能夠將資料報 到正確的目的地,並在 過程中選擇最佳路由裝置 通過路由表 決定端到端的網路範圍,工作在網路層。子網掩碼長度最長的最優先匹配 選取路由協議中優先順序最小的最優先匹配 dierect 0 ospf 10 is...
靜態路由和動態路由 靜態路由解析
1 網路層的功能 給傳輸層協議提供簡單靈活的 無連線的 盡最大努力交付的資料報服務。2 路由器為每乙個資料報單獨地選擇 路徑,網路層並不提供服務質量的承諾。也就是說路由器直接丟棄傳輸過程 錯的資料報,如果網路中待發的資料報太多,路由器處理不了也直接丟棄,既不判斷資料報重複,也不確保資料報按傳送順序到...