1 介紹

Vue 很適合用來(lái)構(gòu)建單頁(yè)面應(yīng)用。對(duì)于大多數(shù)此類應(yīng)用，都推薦使用官方支持的Vue Router；在單頁(yè)面應(yīng)用(Single-page application）中，客戶端的 JavaScript 可以攔截頁(yè)面的跳轉(zhuǎn)請(qǐng)求，動(dòng)態(tài)獲取新的數(shù)據(jù)，然后在無(wú)需重新加載的情況下更新當(dāng)前頁(yè)面。這樣通?？梢詭?lái)更順滑的用戶體驗(yàn)，因?yàn)檫@類場(chǎng)景下用戶通常會(huì)在很長(zhǎng)的一段時(shí)間中做出多次交互。這類的單頁(yè)面應(yīng)用中，路由的更新是在客戶端執(zhí)行的。

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

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

以下我們來(lái)介紹Vue Router的基本使用。

2 Vue Router的使用

2.1 安裝

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

npm install vue-router@4

2.2 引入

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

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

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

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

文件內(nèi)容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 項(xiàng)目其他頁(yè)面路由（推薦使用）
import Practice from "../router/practiceFolder/practice";
// vue項(xiàng)目自帶路由
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聲明的對(duì)象會(huì)被當(dāng)做路由對(duì)象，放入到路由對(duì)象池里。

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使用

入之后我們單頁(yè)面應(yīng)用可以在app.vue配置使用router-view來(lái)切換頁(yè)面，代碼如下：

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

引入之后，在 Vue 實(shí)例中，你可以通過(guò) $router 訪問(wèn)路由實(shí)例，若想要導(dǎo)航到不同的 URL，使用this.$router.push(...)進(jìn)行跳轉(zhuǎn)

詳細(xì)的router-view使用方法可見(jiàn)vue router-view使用詳解

2.3.2 router-link使用

當(dāng)使用 <router-link> 時(shí)，內(nèi)部會(huì)調(diào)用router.push(...)這個(gè)方法，所以點(diǎn)擊 <router-link :to="..."> 相當(dāng)于調(diào)用 router.push(...)

2.3.3 在 setup 中訪問(wèn)路由和當(dāng)前路由

因?yàn)槲覀冊(cè)?setup 里面沒(méi)有訪問(wèn) this，所以我們不能再直接訪問(wèn) 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,
        },
      })
    }
  },
}

2.4 其他API

除以上介紹的Vue Router基本API，還有如下API可供使用：

• NavigationFailureType: 導(dǎo)航失敗類型
• START_LOCATION: 默認(rèn)開(kāi)始位置
• createMemoryHistory: 使用記憶歷史模式
• createRouterMatcher:
• createWebHashHistory: 創(chuàng)建哈希模式
• createWebHistory: 創(chuàng)建html5模式
• isNavigationFailure: 導(dǎo)航是否失敗
• onBeforeRouteLeave: 導(dǎo)航守衛(wèi)，setup中使用，在當(dāng)前位置的組件將要離開(kāi)時(shí)觸發(fā)。
• onBeforeRouteUpdate: 導(dǎo)航守衛(wèi)，setup中使用，在當(dāng)前位置即將更新時(shí)觸發(fā)。
• parseQuery: 解析query參數(shù)
• stringifyQuery: 字符串query參數(shù)
• useLink: 將RouterLink 的內(nèi)部行為作為一個(gè)組合式 API 函數(shù)公開(kāi)。
• useRoute: 替代this.$route
• useRouter: 替代this.$router

本文參考官網(wǎng)，進(jìn)行vue3路由配置實(shí)際操作，更加全面的使用請(qǐng)參考官網(wǎng)vue router。

到此這篇關(guān)于Vue3中vue-router的使用方法詳解的文章就介紹到這了,更多相關(guān)Vue3 vue-router內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論