vue路由如何渲染不同頁面

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

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

Vue路由的基本概念

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

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

創(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數(shù)組，并將其傳遞給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地址。它適用于組件之間的內(nèi)部導航。

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

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

渲染不同頁面的組件

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

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

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

path: '/contact',
component: Contact

}
]

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

路由參數(shù)

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

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

const routes = [
 {

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

}
]

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

路由鉤子

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

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

  • afterEach：在路由切換之后調(diào)用。可以用于日志記錄和跟蹤等任務。

  • beforeRouteLeave：在路由離開當前組件之前調(diào)用。可以用于提示用戶保存更改或取消離開等任務。

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

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

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

廣告

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

成都定制網(wǎng)站網(wǎng)頁設計