Vue-Router總結大全，從小白到精通，含vue3.0路由用法

目錄

前言

使用

捕獲所有路由或 404 Not found 路由

程式設計式導航

命名視圖

别名

路由元件傳參

不同的曆史記錄模式

導航守衛

全局前置守衛

全局解析守衛

全局後置鈎子

路由獨享的守衛

元件内的守衛

完整的導航解析流程

路由元資訊

資料擷取 資料擷取 | Vue Router (vuejs.org)

導航完成後擷取資料

在導航完成前擷取資料

Vue Router 和 組合式 API

在 setup 中通路路由和目前路由

useLink

過渡動效

對所有的路由使用相同的過渡

單個路由的過渡

基于路由的動态過渡

滾動行為

延遲滾動

路由懶加載

把元件按組分塊

擴充 RouterLink

檢測導航故障

鑒别導航故障

檢測重定向

動态路由

添加路由

删除路由

添加嵌套路由

檢視現有路由

這是我在實際工作中用到的先寫這：

/**
 * Note: 路由配置項
 *
 * hidden: true                 // 當設定 true 的時候該路由不會再側邊欄出現 如401，login等頁面，或者如一些編輯頁面/edit/1
 * alwaysShow: true            // 當你一個路由下面的 children 聲明的路由大于1個時，自動會變成嵌套的模式--如元件頁面
 *                              // 隻有一個時，會将那個子路由當做根路由顯示在側邊欄--如引導頁面
 *                              // 若你想不管路由下面的 children 聲明的個數都顯示你的根路由
 *                              // 你可以設定 alwaysShow: true，這樣它就會忽略之前定義的規則，一直顯示根路由
 * redirect: noRedirect           // 當設定 noRedirect 的時候該路由在面包屑導航中不可被點選
 * name:'router-name'             // 設定路由的名字，一定要填寫不然使用<keep-alive>時會出現各種問題
 * meta : {
    roles: ['admin','editor']    // 設定該路由進入的權限，支援多個權限疊加
    title: 'title'               // 設定該路由在側邊欄和面包屑中展示的名字
    icon: 'svg-name'             // 設定該路由的圖示，對應路徑src/icons/svg
    breadcrumb: false            // 如果設定為false，則不會在breadcrumb面包屑中顯示
  }
 */      

通過調用 app.use(router)，我們可以在任意元件中以 this.$router 的形式通路它，并且以 this.$route 的形式通路目前路由：

1.// 5. 建立并挂載根執行個體
const app = Vue.createApp({})
//確定 _use_ 路由執行個體使
//整個應用支援路由。
app.use(router)
 
app.mount('#app')