<center id="uqgce"></center>
W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
對于大多數(shù)單頁面應(yīng)用,都推薦使用官方支持的 vue-router 庫。更多細(xì)節(jié)可以移步 vue-router 文檔。
如果你只需要非常簡單的路由而不想引入一個功能完整的路由庫,可以像這樣動態(tài)渲染一個頁面級的組件:
const NotFoundComponent = { template: '<p>Page not found</p>' }
const HomeComponent = { template: '<p>Home page</p>' }
const AboutComponent = { template: '<p>About page</p>' }
const routes = {
'/': HomeComponent,
'/about': AboutComponent
}
const SimpleRouter = {
data: () => ({
currentRoute: window.location.pathname
}),
computed: {
CurrentComponent() {
return routes[this.currentRoute] || NotFoundComponent
}
},
render() {
return Vue.h(this.CurrentComponent)
}
}
Vue.createApp(SimpleRouter).mount('#app')
結(jié)合 HTML5 History API,你可以建立一個麻雀雖小但是五臟俱全的客戶端路由器??梢灾苯涌?a rel="external nofollow" target="_blank" target="_blank" rel="nofollow">實(shí)例應(yīng)用。
如果你有更偏愛的第三方路由,如 Page.js 或者 Director,整合起來也一樣簡單。這里有一個使用了 Page.js 的完整示例。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
<center id="e8ceg"></center>
更多建議: