一起學Vue：路由(vue-router)

AI代筆發表於2020-11-01
Vue路由

前言

學習vue-router就要先了解路由是什麼？前端路由的實現原理？vue-router如何使用？等等這些問題，就是本篇要探討的主要問題。

vue-router是什麼

路由是什麼？

大概有兩種說法：從路由的用途上來解釋路由就是指隨著瀏覽器位址列的變化，展示給使用者的頁面也不相同。從路由的實現原理上來解釋路由就是URL到函式的對映。

vue-router是什麼

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度整合。

vue-router實現原理

基於hash

基於location.hash來實現的。其實現原理也很簡單，location.hash的值就是URL中#後面的內容。比如下面這個網站，它的location.hash='#me'：

https://localhost#me

hash也存在下面幾個特性：

  • URL中hash值只是客戶端的一種狀態，也就是說當向伺服器端發出請求時，hash部分不會被髮送。
  • hash值的改變，都會在瀏覽器的訪問歷史中增加一個記錄。因此我們能通過瀏覽器的回退、前進按鈕控制hash的切換。
  • 我們可以使用hashchange事件來監聽hash的變化。

vue-router 預設 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入。

基於History

如果不想要很醜的 hash，我們可以用路由的 history 模式，只需要在配置路由規則時，加入"mode: 'history'"，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面。其中做最主要的API有以下兩個：history.pushState()和history.repalceState()。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

如何使用vue-router

效果

使用

首先，安裝vue-router

npm install vue-router

接下來，在main.js定義 (路由) 元件、安裝外掛、定義路由、建立 router 例項，然後傳 routes 配置、建立和掛載根例項。

import Vue from 'vue'
import VueRouter from 'vue-router';
import App from './App.vue'
import './plugins/element.js'

// 1. 定義 (路由) 元件。
import TodoList from './components/TodoList.vue';
import TodoListWithUI from './components/TodoListWithUI.vue'
import TodoListWithApi from './components/TodoListWithApi.vue'

Vue.config.productionTip = false

// 2. 安裝外掛
Vue.use(VueRouter); 

// 3. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，或者，只是一個元件配置物件。
const routes = [
  { path: '/noui', component: TodoList },
  { path: '/ui', component: TodoListWithUI },
  { path: '/api', component: TodoListWithApi }
]

// 4. 建立 router 例項，然後傳 `routes` 配置
// 你還可以傳別的配置引數, 不過先這麼簡單著吧。
const router = new VueRouter({
  routes // (縮寫) 相當於 routes: routes
})

// 5. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

最後，App.vue使用 router-link 元件來導航,和放置路由出口 router-view

<template>
<div id="app">
    <p>
        <!-- 使用 router-link 元件來導航. -->
        <!-- 通過傳入 `to` 屬性指定連結. -->
        <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/noui">無UI</router-link>&nbsp;&nbsp;
        <router-link to="/ui">有UI</router-link>&nbsp;&nbsp;
        <router-link to="/api">有API</router-link>&nbsp;&nbsp;
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的元件將渲染在這裡 -->
    <router-view></router-view>
</div>
</template>

<script>
export default {
    name: 'app',
    components: {}
}
</script>

小結

目前為止，我們完成了vue-router的基本用法，是不是還是挺簡單的呀。其他動態路由匹配、巢狀路由等用法我們在這裡不進行展開了。

文中用到的程式碼我們放在：https://github.com/zcqiand/miscellaneous/tree/master/vue

相關文章