目錄

• 概念
• Router
• 簡介
• Vue Router的特性
• Vue Router的使用步驟
• 分類
• 巢狀路由
• 動態路由
• 命名路由
• 式導航
• 總結

概念

路由的本質就是一種對應關係，比如說我們在url地址中輸入我們要訪問的url地址之後，瀏覽器要去請求這個url地址對應的資源。
那麼url地址和真實的資源之間就有一種對應的關係，就是路由。

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

1).後端路由是由伺服器端進行實現，並完成資源的分發
後端路由效能相對前端路由來說較低，所以，我們接下來主要學習的是前端路由
2).前端路由是依靠hash值(錨鏈接)的變化進行實現
前端路由的基本概念：根據不同的事件來顯示不同的頁面內容，即事件與事件處理函式之間的對應關係

Vue Router

簡介

它是一個Vue.官方提供的路由管理器。是一個功能更加強大的前端路由器，推薦使用。
Vue Router和Vue.js非常契合，可以一起方便的實現SPA(single page web application,單頁應用程式)應用程式的開發。

Vue Router依賴於Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性

• 支援H5歷史模式或者hash模式
• 支援巢狀路由
• 支援路由引數
• 支援程式設計式路由
• 支援命名路由
• 支援路由導航守衛
• 支援路由過渡動畫特效
• 支援路由懶載入
• 支援路由滾動行為

Vue Router的使用步驟

1.匯入js檔案

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

2.新增路由連結:是路由中提供的標籤，預設會被渲染為a標籤，to屬性預設被渲染為href屬性，to屬性的值會被渲染為#開頭的hash地址

<router-link to="/user">User</router-link>

3.新增路由填充位（路由佔位符）

<router-view></router-view>

4.定義路由元件

var User = { template:"<div>This is User</div>" }

5.配置路由規則並建立路由例項

var myRouter = new VueRouter({
    //routes是路由規則陣列
    routes:[
        //每一個路由規則都是一個物件，物件中至少包含path和component兩個屬性
        //path表示  路由匹配的hash地址，component表示路由規則對應要展示的元件物件
        {path:"/user",component:User},{path:"/login",component:Login}
    ]
})

6.將路由掛載到Vue例項中

new Vue({    el:"#app",//通過router屬性掛載路由物件    router:myRouter})new Vue({
    el:"#app",//通過router屬性掛載路由物件
    router:myRouter
})

補充：

路由重定向：可以通過路由重定向為頁面設定預設展示的元件

在路由規則中新增一條路由規則即可，如

var myRouter = new www.cppcns.comVueRouter({
    //routes是路由規則陣列
    routes: [
        //path設定為/表示頁面最初始的地址 /,redirect表示要被重定向的新地址，設定為一個路由即可
        { 程式設計客棧path:"/",redirect:"/user"},{ path: "/user",component: User },{ path: "/login",component: Login }
    ]
})

分類

巢狀路由

巢狀路由最關鍵的程式碼在於理解子級路由的概念：

比如我們有一個/login的路由

那麼/login下面還可以新增子級路由，如:

/login/account

/login/phBsHNFIkZeoone

動態路由

補充：

1.我們可以通過props來接收引數

2、還有一種情況，我們可以將props設定為物件，那麼就直接將物件的資料傳遞給元件進行使用

3、如果想要獲取傳遞的引數值還想要獲取傳遞的物件資料，那麼props應該設定為函式形式。

命名路由

給路由取別名

程式設計式導航

呼叫js的api方法實現導航

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!