正文

單頁應用程序是或多或少復雜的應用程序，它加載一個單一的HTML頁面。每當用戶與它們互動時，它們就會使用JavaScript動態(tài)地更新其內容。

JavaScript框架，如React和Vue，使我們能夠非常容易地創(chuàng)建SPA。然而，為了使用Vue.js創(chuàng)建多頁面的SPA，我們將需要使用一個路由器。vue-router庫是Vue.js的官方路由器，也是我們在本文中要使用的。

在這篇文章中，我們將討論如何在Vue.js中安裝一個路由器，以及如何創(chuàng)建我們的路由和管理應用程序中不同視圖之間的導航的一些基本知識。讓我們開始吧!

什么是vue-router，它是如何工作的？

Vue Router是一個JavaScript庫，你可以用來在你的Vue.js應用程序中設置路由。通過vue-router，你可以定義路由并將其映射到組件。你還可以使用路由器來管理你的應用程序中不同視圖之間的導航。

vue-router的功能與React Router DOM等其他解決方案非常相似，它為我們提供了許多功能：

• 支持HTML5歷史API，實現干凈的URL。
• 路由的懶散加載。
• 路線參數、查詢、通配符。
• 由Vue.js的過渡系統(tǒng)提供的視圖過渡效果。

如何安裝vue-router庫

要安裝vue-router，你需要使用你喜歡的Node.js包管理器，無論是npm還是yarn。在你的終端，和你的項目文件夾內，你可以運行以下命令：

npm install vue-router

或

yarn add vue-router

vue-router安裝后，你將需要在你的Vue.js應用程序入口處導入它。例如，如果你使用Vue 3來創(chuàng)建你的項目，你可以在src/main.js中導入vue-router，如下。

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

自動安裝Vue Router

如果你使用Vue CLI來創(chuàng)建你的新項目，你會得到一個選項，即從一開始就添加一個路由器。這種選擇也會給你所有的模板和結構，你需要立即開始使用所有的路由功能。

然而，這可能并不總是一種選擇。例如，如果你正在使用Vite來設置你的項目（一個越來越流行的替代方案），或者如果你有一個以前的項目現在需要擴展，你就必須手動安裝Vue Router庫，如上一節(jié)所示。

創(chuàng)建一個基本的vue-router例子

為了使用Vue Router庫附帶的功能，你需要創(chuàng)建一個實例，在你的main.js文件中導入它，并告訴Vue把它作為一個路由器使用。

為此，你需要創(chuàng)建一個新的JavaScript文件，在那里你將添加路由器正常工作所需的所有基本代碼。為了簡單起見，我們將創(chuàng)建一個名為router 的文件夾，里面只有一個index.js文件，我們將在這里寫下我們的路由器的所有代碼。

import { createRouter, createWebHistory } from "vue-router";
const routes = [];
const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_APP_ENV),
  routes,
});
export default router;

在vue-router中創(chuàng)建路由

在你的項目中安裝和設置了vue-router后，你可以開始創(chuàng)建路由。路由是由HTTP方法和路徑的地圖定義的，并與一個組件相關聯。

在vue-router中，創(chuàng)建路由的方法是使用VueRouter構造函數。這個函數接收一個路由對象作為參數，我們可以在這里定義我們的路由。路由需要以數組格式來定義。

const routes = [
  {
    path: "/",
    component: HomeComponent
  },
  {
    path: "/about",
    component: AboutComponent
  },
]

對于我們想要創(chuàng)建的每個路由，我們需要在路由數組中添加一個對象。這個對象至少要有兩個屬性：路徑和組件。path屬性對應的是我們想要映射到一個組件的URL路徑。component屬性是訪問路由時將被渲染的Vue組件。

在上面的例子中，我們定義了兩條路由：一條是主頁（/），另一條是關于頁面（/about）。當用戶導航到主頁時，HomePage 組件將被呈現。同樣地，當用戶導航到"/about "時，顯示的將是AboutPage 組件。

當然，你必須在Router文件中導入這兩個組件，才能使這個例子發(fā)揮作用。

你也可以使用動態(tài)導入來異步加載組件。如果你想懶散地加載組件，這特別有用，這可以提高大型應用程序的性能。

在組件中渲染你的視圖

一旦你定義了你的路由，你將需要告訴vue-router在哪里渲染視圖。為此，vue-router為我們提供了**組件。這是一個占位符，將被替換為與當前活動路由相關的組件。

為了使用這個組件，你需要在你的應用程序的某個地方添加它，一般是在你的App.vue文件的模板中。

<template>
  <section>
    <router-view />
  </section>
</template>

有了這段代碼，當用戶導航到/about時，他們將看到AboutPage組件在*中被渲染。*同樣地，當他們導航回/（主頁）時，他們會看到HomePage組件。

用vue-router管理視圖之間的導航

一旦你定義了路由，并插入了*組件，你就可以開始使用vue-router在應用程序的不同視圖之間進行導航。vue-router庫為我們提供了兩種執(zhí)行導航的方式：router-link和vue-router實例方法push*。

Router-link是一個Vue組件，讓我們在應用程序中定義內部鏈接。它默認渲染一個*標簽，但如果我們向它傳遞一個標簽屬性，它也可以渲染其他類型的元素。例如，我們可以使用來渲染一個*元素。

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" ><router-link to="/about" tag="button">Go to About</router-link>
</a>

這個按鈕在被點擊時將把我們帶到"/about "頁面，而不需要重新加載我們的應用程序。

另一方面，vue-router實例方法push可以被用來以編程方式導航到一個給定的路由。為了使用這個方法，我們需要有一個對vue-router實例的引用。最簡單的方法是使用所有Vue組件上的"$router "屬性，如果我們使用選項API的話。

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" >this.$router.push({ path: '/about' })
</a>

或者通過在我們的組件中創(chuàng)建一個本地路由器實例，如果我們使用Composition API的話。

<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank" >import { useRouter } from 'vue-router';
const router = useRouter();
function redirect() {
  router.push({ path: '/about' });
}
</a>

有了這些代碼，當按鈕被點擊時，用戶將被重定向到"/about"。

最后的思考

在這篇文章中，我們回顧了如何在Vue.js應用程序中安裝和設置vue-router。我們還研究了如何在我們的應用程序中創(chuàng)建路由并管理不同視圖之間的導航。

以上就是Vue.js中安裝一個路由器demo的詳細內容，更多關于Vue.js安裝路由器的資料請關注腳本之家其它相關文章！

最新評論