vue路由如何渲染不同頁(yè)面

這篇文章主要講解了“vue路由如何渲染不同頁(yè)面”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue路由如何渲染不同頁(yè)面”吧！

Vue路由的基本概念

Vue路由是一種管理SPA（單頁(yè)應(yīng)用程序）頁(yè)面的機(jī)制。它創(chuàng)建了不同的路徑和URL地址，并將它們映射到不同的組件中。在Vue中，一個(gè)組件代表一個(gè)頁(yè)面。當(dāng)用戶在SPA應(yīng)用程序中導(dǎo)航時(shí)，Vue路由根據(jù)URL地址和路徑來呈現(xiàn)相應(yīng)的組件。

Vue路由主要有三個(gè)概念：路由、路由器和組件。路由是URL地址和組件之間的映射關(guān)系。路由器是Vue應(yīng)用程序中用于管理應(yīng)用程序路由的對(duì)象。組件是Vue應(yīng)用程序中的一個(gè)可重用的Vue實(shí)例，它負(fù)責(zé)呈現(xiàn)頁(yè)面內(nèi)容。

創(chuàng)建Vue路由

要在Vue中使用路由，我們需要在Vue應(yīng)用程序中安裝Vue Router。安裝Vue Router非常簡(jiǎn)單，只需要使用npm命令行工具來安裝它。

npm install vue-router

安裝完成后，我們需要在Vue應(yīng)用程序中創(chuàng)建一個(gè)vue-router實(shí)例。vue-router實(shí)例包括一組路由，每個(gè)路由映射到一個(gè)組件。

// 引入 vue 和 vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 在 Vue 中使用 VueRouter
Vue.use(VueRouter)

// 定義路由組件
const Home = { template: '... Home ...' }
const About = { template: '... About ...' }
const Contact = { template: '... Contact ...' }

// 定義路由
const routes = [
 { path: '/', component: Home },
 { path: '/about', component: About },
 { path: '/contact', component: Contact }
]

// 創(chuàng)建路由器并傳遞路由集合
const router = new VueRouter({
 routes
})

// 創(chuàng)建Vue實(shí)例
const app = new Vue({ router }).$mount('#app')

在上面的代碼中，我們定義了三個(gè)路由：Home、About和Contact。每個(gè)路由都映射到一個(gè)組件。我們還創(chuàng)建了一個(gè)包含所有路由的routes數(shù)組，并將其傳遞給VueRouter實(shí)例。然后，我們將VueRouter實(shí)例傳遞給Vue實(shí)例。

Vue路由的三種模式

Vue路由提供了三種模式：歷史模式、哈希模式和抽象模式。這些模式有不同的用途和優(yōu)點(diǎn)。

歷史模式：使用HTML5 history API來實(shí)現(xiàn)URL地址管理。歷史模式不適用于所有Web服務(wù)器配置。如果服務(wù)器在訪問不存在的資源時(shí)返回404錯(cuò)誤，則需要進(jìn)行特殊配置。

創(chuàng)建路由器時(shí)，可以將模式設(shè)置為history來啟用歷史模式。

const router = new VueRouter({
 mode: 'history',
 routes
})

哈希模式：URL地址以井號(hào)#開頭。這種模式比歷史模式更容易實(shí)現(xiàn)，并且不需要特殊的服務(wù)器配置。

創(chuàng)建路由器時(shí)，可以將模式設(shè)置為hash來啟用哈希模式。

const router = new VueRouter({
 mode: 'hash',
 routes
})

抽象模式：這種模式不包括URL地址。它適用于組件之間的內(nèi)部導(dǎo)航。

創(chuàng)建路由器時(shí)，可以將模式設(shè)置為abstract來啟用抽象模式。

const router = new VueRouter({
 mode: 'abstract',
 routes
})

渲染不同頁(yè)面的組件

Vue路由可以根據(jù)路由配置的path來匹配對(duì)應(yīng)的組件。我們可以在路由配置中定義路徑和渲染的組件。

// 創(chuàng)建聯(lián)系人組件
const Contact = {
 template: '<div>Contact</div>'
}

// 創(chuàng)建路由數(shù)組并映射路徑到組件
const routes = [
 {

path: '/contact',
component: Contact

}
]

這將創(chuàng)建一個(gè)Contact組件并將其映射到/contact路徑。當(dāng)用戶進(jìn)入/contact路徑時(shí)，Vue路由器將渲染Contact組件。

路由參數(shù)

路由參數(shù)是一個(gè)路徑中的變量部分，比如：/contact/:id。當(dāng)用戶在瀏覽器中輸入頁(yè)面地址時(shí)，路由參數(shù)將被Vue解析并渲染相應(yīng)的組件。我們可以在路由中動(dòng)態(tài)定義參數(shù)值。

const Contact = {
 template: '<div>Contact {{ $route.params.id }}</div>'
}

const routes = [
 {

path: '/contact/:id',
component: Contact

}
]

用戶進(jìn)入/contact/123路徑時(shí)，$route.params.id參數(shù)將被Vue路由器解析為123。Contact組件將使用這個(gè)參數(shù)來呈現(xiàn)對(duì)應(yīng)頁(yè)面。

路由鉤子

Vue路由還提供了一個(gè)路由鉤子機(jī)制，用于在路由進(jìn)入和退出時(shí)執(zhí)行特定的行為。路由鉤子可以在組件中使用。Vue路由提供了三種鉤子：

• beforeEach：在路由切換之前調(diào)用?？梢杂糜谏矸蒡?yàn)證和授權(quán)等任務(wù)。

• afterEach：在路由切換之后調(diào)用?？梢杂糜谌罩居涗浐透櫟热蝿?wù)。

• beforeRouteLeave：在路由離開當(dāng)前組件之前調(diào)用?？梢杂糜谔崾居脩舯４娓幕蛉∠x開等任務(wù)。

// 全局鉤子
router.beforeEach((to, from, next) => {
 // do something before route change
 next()
})

router.afterEach((to, from) => {
 // do something after route change
})

// 組件鉤子
{
 beforeRouteLeave (to, from, next) {

// do something before component leaves
next()

}
}

感謝各位的閱讀，以上就是“vue路由如何渲染不同頁(yè)面”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue路由如何渲染不同頁(yè)面這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！