Vue.js中安裝一個路由器demo

更新時間：2022年12月13日 14:09:15 作者：Jovie

這篇文章主要為大家介紹了Vue.js中安裝一個路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

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

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

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

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

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

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

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

如何安裝vue-router庫

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

npm install vue-router

或

yarn add vue-router

vue-router安裝后，你將需要在你的Vue.js應(yīng)用程序入口處導(dǎo)入它。例如，如果你使用Vue 3來創(chuàng)建你的項目，你可以在src/main.js中導(dǎo)入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)建你的新項目，你會得到一個選項，即從一開始就添加一個路由器。這種選擇也會給你所有的模板和結(jié)構(gòu)，你需要立即開始使用所有的路由功能。

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

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

為了使用Vue Router庫附帶的功能，你需要創(chuàng)建一個實例，在你的main.js文件中導(dǎo)入它，并告訴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)建路由

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

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

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

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

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

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

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

在組件中渲染你的視圖

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

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

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

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

用vue-router管理視圖之間的導(dǎo)航

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

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

<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 "頁面，而不需要重新加載我們的應(yīng)用程序。

另一方面，vue-router實例方法push可以被用來以編程方式導(dǎo)航到一個給定的路由。為了使用這個方法，我們需要有一個對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>

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