Vue3中vue-router的使用方法詳解

更新時間：2023年06月18日 15:45:30 作者：Saga?Two

Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構建單頁應用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下

1 介紹

Vue 很適合用來構建單頁面應用。對于大多數(shù)此類應用，都推薦使用官方支持的Vue Router；在單頁面應用(Single-page application）中，客戶端的 JavaScript 可以攔截頁面的跳轉請求，動態(tài)獲取新的數(shù)據(jù)，然后在無需重新加載的情況下更新當前頁面。這樣通常可以帶來更順滑的用戶體驗，因為這類場景下用戶通常會在很長的一段時間中做出多次交互。這類的單頁面應用中，路由的更新是在客戶端執(zhí)行的。

Vue Router 是 Vue 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構建單頁應用變得輕而易舉。功能包括：

嵌套路由映射
動態(tài)路由選擇
模塊化、基于組件的路由配置
路由參數(shù)、查詢、通配符
展示由 Vue.js 的過渡系統(tǒng)提供的過渡效果
細致的導航控制
自動激活 CSS 類的鏈接
HTML5 history 模式或 hash 模式
可定制的滾動行為
URL 的正確編碼

以下我們來介紹Vue Router的基本使用。

2 Vue Router的使用

2.1 安裝

對于vue3，我們推薦使用vue-router 4.x及以上版本。node環(huán)境安裝如下：

npm install vue-router@4

2.2 引入

在我們工程項目中，路由文件通常需要單獨管理，以便于后續(xù)的使用以及維護。再此基礎下，我們引入分為兩步：

創(chuàng)建統(tǒng)一管理路由入口文件
vue項目引入使用路由入口文件

2.2.1 創(chuàng)建路由文件

在與main.ts文件的同級目錄下創(chuàng)建router文件夾，并添加index.ts文件（使用ts，若使用js也同理）。

文件內容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 項目其他頁面路由（推薦使用）
import Practice from "../router/practiceFolder/practice";
// vue項目自帶路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];
const routers = [...routes, ...Practice];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [...routes, ...Practice]
});
export default router;

其中，使用RouteRecordRaw聲明的對象會被當做路由對象，放入到路由對象池里。

createRouter創(chuàng)建路由；

createWebHistory代表路由使用 HTML5 模式，也是推薦使用的模式；

2.2.2 main.ts 引入

代碼如下：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

2.3 使用

2.3.1 router-view使用

入之后我們單頁面應用可以在app.vue配置使用router-view來切換頁面，代碼如下：

<template>
  <router-view v-slot="{ Component }">
  </router-view>
</template>

引入之后，在 Vue 實例中，你可以通過 $router 訪問路由實例，若想要導航到不同的 URL，使用this.$router.push(...)進行跳轉

詳細的router-view使用方法可見vue router-view使用詳解

2.3.2 router-link使用

當使用 <router-link> 時，內部會調用router.push(...)這個方法，所以點擊 <router-link :to="..."> 相當于調用 router.push(...)

2.3.3 在 setup 中訪問路由和當前路由

因為我們在 setup 里面沒有訪問 this，所以我們不能再直接訪問 this.$router 或 this.$route。作為替代，我們使用 useRouter 和 useRoute 函數(shù)：

import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    function pushWithQuery(query) {
      router.push({
        name: 'about',
        query: {
          ...route.query,
        },
      })
    }
  },
}