vue靜態路由

2022-10-11 00:51:09 字數 1443 閱讀 7145

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 路由器為每乙個資料報單獨地選擇 路徑,網路層並不提供服務質量的承諾。也就是說路由器直接丟棄傳輸過程 錯的資料報,如果網路中待發的資料報太多,路由器處理不了也直接丟棄,既不判斷資料報重複,也不確保資料報按傳送順序到...