Vue 路由 基礎使用方法

2021-09-24 17:27:47 字數 1049 閱讀 4403

在前端實現路由跳轉的**,也叫單頁面**。

要實現單頁面**,其實是需要前後端配合的。在伺服器端,不管url請求哪個頁面,都統統返回指定頁(通常是index.html)。

在前端實現路由跳轉能很大程度上減輕伺服器壓力,也能提高專案的效能。

最明顯的就是使用者在填寫表單,如果不小心點錯了別的按鈕,跳轉到別的頁面,當使用者返回表單頁時,剛剛填寫過的資訊又要重新填寫一遍。如果想要實時臨時儲存使用者填寫的資訊,在後端處理會有點麻煩,而且需要消耗網路資源。

如果在前端實現路由跳轉,這個問題將非常容易解決。

以上是前端路由的部分有點。

**如下

這段**已事先現引入vue.jsvue-router.js

仔細觀察 url,是有切換的,但url旁邊的重新整理按鈕是沒變化的。

這就是前端路由與後端路由的乙個區別。

路由的操作可以理解為不斷切換要顯示的元件。

路由部分,先定義乙個陣列,用來存放路由資訊的。

上面**用「routes」來存放。

vurrouter是vue-router.js暴露出來的乙個構造器。

裡面放設定好的路由引數即可。

在html部分

Vue路由的使用方法

作為乙個vue的初學者,今天主要分享一下vue路由的基本使用方法,以及如何使用vue cil快速的建立乙個vue專案,若有那點不對,請及時提出,謝謝各位。全域性安裝 npm install g vue cli建立專案 vue create 專案名專案目錄大概如下 1 vue中路由的安裝 npm i ...

vue的基礎使用方法

vue create 注意後面是有點的 按向下的箭頭選擇 manually select features 一般情況下可以選擇 用空格控制選擇與否 choose vue version babel css pre processors linter formatter 2.xsass scss wi...

vue 各種使用方法

安裝 vue cli3 安裝 vue cli npm install g vue cli 建立乙個專案 vue create baifubin 開啟圖形化介面 vue ui 安裝 vue 移動端rem 通過cli3 直接搜尋或npm npm install postcss pxtorem postc...