hualinux 進階 vue 3.0： 添加通路路徑Vue Router介紹

目錄

一、前言

1.1 添加通路路徑

1.2 什麼是路由

二、Vue router介紹

我們在前面學的vue的兩種方式，普通的以<script>标簽導入或vue cli安裝方式，都是以單頁面，隻有一個根路徑“/”。

在實際網站開發中，我們往往是有多個通路路徑的，不同的路徑實作不同的顯示。vue也有這樣的功能，那就是路由route，vue提供相對的插件叫vue router

一、前言

1.1 添加通路路徑

我們前面使用的vue都是隻有一個首頁，而且是單路徑的，通路路徑為“/”，如果我們要想普通網站那樣，實作多種路徑，不同路徑通路顯示不同的内容， 即别人所說的路由。

1.2 什麼是路由

這裡的路由并不是網絡工程方面的路由，網絡工程的路由指從一個網絡通路另一個網絡的路徑。這裡的路由是指定開發的路由。

路由就是URL到函數的映射。簡單了解當通路這個URL，程式就分析這個URL是指定哪個函數或類來處理的。URL指定着某個函數或類來處理，叫綁定，也叫映射。

在web開發中，“route”是指根據url， 配置設定到對應的處理程式。

路由： 

就是一個路徑的解析，根據用戶端送出的路徑，将請求解析到相應的控制器上； 從 URL 找到處理這個 URL 的類和函數。

java中路由是，URL到函數的映射，交給函數處理，這裡的vue是URL麼元件映射，是交給元件處理。

二、Vue router介紹

官方解析為：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度內建，讓建構單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 子產品化的、基于元件的路由配置
• 路由參數、查詢、通配符
• 基于 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的連結
• HTML5 曆史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行為

用 Vue.js + Vue Router 建立單頁應用，感覺很自然：使用 Vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 Vue Router 添加進來，我們需要做的是，将元件 (components) 映射到路由 (routes)，然後告訴 Vue Router 在哪裡渲染它們。

簡單來說就是級元件配置設定通路路徑，這樣就可以讓我們理好的規劃，分類，管理。