黑馬學習記錄 Vue 路由

2021-09-11 06:39:09 字數 907 閱讀 1377

**前端路由:**對於單頁面應用程式來說,主要通過url中的hash(#號)來實現不同頁面之間的切換,同時,hash有乙個特點:http請求中不會包含hash相關的內容;所以,單頁面程式中的頁面跳轉主要用hash實現;

在單頁面應用程式中,這種通過hash改變來切換頁面的方式,稱作前端路由(區別於後端路由);

url中的hash(井號)

匯入 vue-router 元件類庫:

使用 router-link 元件來導航

登入註冊

使用 router-view 元件來顯示匹配到的元件

建立使用vue.extend建立元件

// 4.1 使用 vue.extend 來建立登入元件

var login = vue.extend();

// 4.2 使用 vue.extend 來建立註冊元件

var register = vue.extend();

建立乙個路由 router 例項,通過 routers 屬性來定義路由匹配規則

// 5. 建立乙個路由 router 例項,通過 routers 屬性來定義路由匹配規則

var router = new vuerouter(,

]});

使用 router 屬性來使用路由規則

// 6. 建立 vue 例項,得到 viewmodel

var vm = new vue();

路由基本使用

登入 註冊

vue學習記錄 (路由傳參)

通過上篇文章對路由的工作原理有了基本的了解,現在我們一起來學習路由是如何傳遞引數的,也就是帶引數的跳轉。帶引數的跳轉,一般是兩種方式 a標籤直接跳轉。點選按鈕,觸發函式跳轉。在上篇文章中我們已經有兩個頁面 helloworld.vue hello.vue 現在我準備往hello.vue裡面新增3個鏈...

Vue路由學習

在檢視 vue 教程中,摘抄的筆記,僅供自己回顧用 實際生活中的應用介面,通常由多層巢狀的元件組合而成。同樣地,url 中各段動態路徑也按某種結構對應巢狀的各層元件 摘抄自 示例 相當於,在大的 router view 中又存在可替換的元件 定義 新增了 children 的配置 除了使用 建立 a...

vue路由學習

go to foo go to bar 0.如果使用模組化機制程式設計,匯入vue和vuerouter,要呼叫 vue.use vuerouter 1.定義 路由 元件。可以從其他檔案 import 進來 const foo const bar 2.定義路由 每個路由應該對映乙個元件。其中 comp...