Vue 3.0 Router 全面深入解析

Vue 3.0 Router 是 Vue.js 官方的路由管理器，是實現 SPA（Single Page Application 單頁應用）的關鍵之一。Vue Router 3.0 在性能上有着很大的優化，支持多個路由實例，可以實現更加靈活的路由配置，同時也支持動態路由、命名路由、路由組件懶加載等功能。接下來，我們將從多個方面對 Vue 3.0 Router 進行詳細的闡述。

一、創建路由及基本配置

1、如何創建一個 Vue 3.0 Router 實例?

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

2、路由配置中常用的屬性說明:

• path： 路由的路徑
• name： 路由的名稱
• component： 路由對應的組件
• meta： 路由元信息，可用於存儲一些額外的信息
• redirect： 重定向到另一個路由
• alias： 路由的別名
• children： 嵌套子路由

3、如何使用路由?

默認情況下，路由可以在組件中通過 $router 訪問，而當前路由信息可以通過 $route 訪問，例如：

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about');
    }
  }
};

二、路由導航守衛

路由導航守衛用於在路由跳轉前後進行一些自定義的邏輯處理，Vue Router 3.0 提供了 3 種不同的導航守衛，即：

• 全局導航守衛
• 路由獨享守衛
• 組件內的守衛

1、全局導航守衛

const router = createRouter({
  routes: [...]
});

router.beforeEach((to, from, next) => {
  // 在跳轉前進行一些自定義的邏輯處理
  // 如果需要進行路由跳轉，一定要調用 next() 方法
  next();
});

router.afterEach((to, from) => {
  // 在跳轉後進行一些自定義的邏輯處理
});

2、路由獨享守衛

在某個路由中使用獨享守衛，例如：

{
  path: '/about',
  component: About,
  beforeEnter(to, from, next) {
    // 在跳轉前進行一些自定義的邏輯處理
    next();
  }
}

3、組件內的守衛

在組件內通過 beforeRouteEnter, beforeRouteLeave, beforeRouteUpdate 等生命周期函數來定義組件內的導航守衛。

三、路由懶加載及動態路由

路由懶加載可以讓我們在需要的時候才加載路由對應的組件，避免了一次性加載過多的資源。同時，Vue 3.0 Router 還支持動態路由的配置。

1、動態路由

動態路由是指路由路徑中存在可變的部分，例如：

{
  path: '/user/:id',
  component: User
}

實現動態路由可以使用 $route.params 對象來獲取當前路由參數，例如：

export default {
  mounted() {
    console.log(this.$route.params.id);
  }
};

2、路由懶加載

使用路由懶加載可以在需要的時候才加載路由對應的組件，優化網頁的加載速度。路由懶加載可以通過 import 函數來實現，例如：

{
  path: '/about',
  component: () => import('./views/About.vue')
}

四、命名路由及命名視圖

命名路由和命名視圖可以讓我們在更加複雜的應用中方便地進行路由管理。

1、命名路由

通過給路由設置名稱，可以實現更加方便的路由跳轉，例如：

{
  path: '/user/:id',
  name: 'user',
  component: User
}

export default {
  methods: {
    goToUser() {
      this.$router.push({ name: 'user', params: { id: 123 } });
    }
  }
};

2、命名視圖

在某些場景中，我們需要同時顯示多個視圖，例如頁面布局中的頭部、底部和側邊欄。這時，我們可以使用命名視圖來實現。

<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="sidebar"></router-view>

{
  path: '/user/:id',
  components: {
    default: User,
    header: Header,
    sidebar: Sidebar
  }
}

五、路由元信息

路由元信息可以在路由配置中添加一些額外的信息，例如：

{
  path: '/about',
  component: About,
  meta: {
    requiresAuth: true
  }
}

可以通過路由元信息來進行權限控制等操作。

六、總結

以上就是 Vue 3.0 Router 的全面深入解析，從創建路由、路由導航守衛、路由懶加載及動態路由、命名路由及命名視圖、路由元信息等多個方面進行了闡述，希望對大家有所幫助。