快捷導(dǎo)航

Vue.js中安裝一個(gè)路由器demo

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

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

正文

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

JavaScript框架，如React和Vue，使我們能夠非常容易地創(chuàng)建SPA。然而，為了使用Vue.js創(chuàng)建多頁(yè)面的SPA，我們將需要使用一個(gè)路由器。vue-router庫(kù)是Vue.js的官方路由器，也是我們?cè)诒疚闹幸褂玫摹?/p>

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

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

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

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

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

如何安裝vue-router庫(kù)

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

npm install vue-router

或

yarn add vue-router

vue-router安裝后，你將需要在你的Vue.js應(yīng)用程序入口處導(dǎo)入它。例如，如果你使用Vue 3來(lái)創(chuàng)建你的項(xià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");

自動(dòng)安裝Vue Router

如果你使用Vue CLI來(lái)創(chuàng)建你的新項(xiàng)目，你會(huì)得到一個(gè)選項(xiàng)，即從一開(kāi)始就添加一個(gè)路由器。這種選擇也會(huì)給你所有的模板和結(jié)構(gòu)，你需要立即開(kāi)始使用所有的路由功能。

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

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

為了使用Vue Router庫(kù)附帶的功能，你需要?jiǎng)?chuàng)建一個(gè)實(shí)例，在你的main.js文件中導(dǎo)入它，并告訴Vue把它作為一個(gè)路由器使用。

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

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)建路由

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

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

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

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

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

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

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

在組件中渲染你的視圖

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

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

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

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

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

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

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

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

這個(gè)按鈕在被點(diǎn)擊時(shí)將把我們帶到"/about "頁(yè)面，而不需要重新加載我們的應(yīng)用程序。

另一方面，vue-router實(shí)例方法push可以被用來(lái)以編程方式導(dǎo)航到一個(gè)給定的路由。為了使用這個(gè)方法，我們需要有一個(gè)對(duì)vue-router實(shí)例的引用。最簡(jiǎn)單的方法是使用所有Vue組件上的"$router "屬性，如果我們使用選項(xiàng)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>

或者通過(guò)在我們的組件中創(chuàng)建一個(gè)本地路由器實(shí)例，如果我們使用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)按鈕被點(diǎn)擊時(shí)，用戶將被重定向到"/about"。