vue路由學習

​ 路由的本質就是一種對應關係，在**程式中，乙個a標籤跳轉頁面，裡面a標籤裡面需要寫對用頁面的路徑，或者寫跳轉後台的服務。那麼這個路徑就與頁面相對應，我們可以將它視為路由的一種形式。

路由分為前端路由和後端路由

下面學習vue的路由管理器：vue router

1. 選項卡案例

tab1

tab2

tab3

tab4

width: 500px;

height: 300px;

border: 1px solid black;

}display: inline-block;

width: 100px;

padding: 10px;

}.tablebody

1.router簡介

vue router的特性：

支援h5歷史模式或者hash模式

支援巢狀路由

支援路由引數

支援程式設計式路由

支援命名路由

支援路由導航守衛

支援路由過渡動畫特效

支援路由懶載入

支援路由滾動行為

2.vue router使用

將原先的a標籤修改為 標籤 

router-link相當於a標籤中的a to相當於href
-->
tab1
tab2
tab3
tab4
width: 500px;
height: 300px;
border: 1px solid black;
}width: 100px;
padding: 10px;
}.tablebody 

3.巢狀路由

​ 在前面元件學習中，我們間接的了解到了父元件和子元件的概念，那麼在乙個路由例項中存在這另乙個子路由，我們將他們稱之為巢狀路由

login

點選1點選2

點選3點選4

​ 上面的**我們直接使用 $route.params.id 獲取路由中傳的引數值，除此之外，我們還可以通過props傳值

點選1點選2

點選3點選4

5.路由別名

111222

3336.程式設計式導航

頁面導航的兩種方式：

程式設計式導航：呼叫js的api方法實現導航

this.$router.push("hash位址");

this.$router.push("/login");
this.$router.push( });
this.$router.push();
this.$router.push( });
this.$router.go( n );//n為數字，參考history.go
this.$router.go( -1 );

gitee位址：

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...

vue學習之路由

路由需要引入庫 vue router 我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有乙個 user 元件，對於所有 id 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue router 的路由路徑中使用 動態路徑引數 dynamic segment 來達到...