這篇文章主要講解了“vue路由如何渲染不同頁面”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue路由如何渲染不同頁面”吧！

創(chuàng)新互聯(lián)專注于磐石網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供磐石營銷型網站建設，磐石網站制作、磐石網頁設計、磐石網站官網定制、重慶小程序開發(fā)公司服務，打造磐石網絡公司原創(chuàng)品牌,更為您提供磐石網站排名全網營銷落地服務。

Vue路由的基本概念

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

Vue路由主要有三個概念：路由、路由器和組件。路由是URL地址和組件之間的映射關系。路由器是Vue應用程序中用于管理應用程序路由的對象。組件是Vue應用程序中的一個可重用的Vue實例，它負責呈現(xiàn)頁面內容。

創(chuàng)建Vue路由

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

npm install vue-router

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

// 引入 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實例
const app = new Vue({ router }).$mount('#app')

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

Vue路由的三種模式

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

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

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

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

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

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

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

抽象模式：這種模式不包括URL地址。它適用于組件之間的內部導航。

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

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

渲染不同頁面的組件

Vue路由可以根據路由配置的path來匹配對應的組件。我們可以在路由配置中定義路徑和渲染的組件。

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

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

path: '/contact',
component: Contact

}
]

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

路由參數

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

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

const routes = [
 {

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

}
]

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

路由鉤子

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

• beforeEach：在路由切換之前調用?？梢杂糜谏矸蒡炞C和授權等任務。

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

• beforeRouteLeave：在路由離開當前組件之前調用?？梢杂糜谔崾居脩舯４娓幕蛉∠x開等任務。

// 全局鉤子
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路由如何渲染不同頁面”的內容了，經過本文的學習后，相信大家對vue路由如何渲染不同頁面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

分享名稱：vue路由如何渲染不同頁面
URL鏈接：http://www.rwnh.cn/article34/jepgse.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、響應式網站、外貿建站、網站策劃、微信小程序、網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)