這篇文章主要介紹Vue.js中如何使用嵌套路由,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、舒蘭網(wǎng)絡(luò)推廣、成都微信小程序、舒蘭網(wǎng)絡(luò)營銷、舒蘭企業(yè)策劃、舒蘭品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們大的嘉獎;成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供舒蘭建站搭建服務(wù),24小時服務(wù)熱線:028-86922220,官方網(wǎng)址:muchs.cn如果尚未安裝,請運(yùn)行以下命令全局安裝 Vue CLI:
$ npm install -g @vue/cli
或者
$ yarn global add @vue/cli
現(xiàn)在你能從命令行運(yùn)行vue
命令了。讓我們創(chuàng)建一個名為 alligator-nest 的 Vue 應(yīng)用:
$ vue create alligator-nest
在提示符下選擇默認(rèn)預(yù)設(shè)(按 Enter 鍵)。之后,運(yùn)行以下命令:
$ npm install vue-router
然后,在你選擇的編輯器中打開alligator-nest
目錄。
以下 CSS 將幫助我們?yōu)?UI 定位元素。將其作為樣式表文件添加到 public/
文件夾中,并在public/index.html
中引用它。為此,我們將使用 CSS grid:
grid.css
.row1 { grid-row-start: 1; grid-row-end: 2; } .row12 { grid-row-start: 1; grid-row-end: 3; } .row123 { grid-row-start: 1; grid-row-end: 4; } .row2 { grid-row-start: 2; grid-row-end: 3; } .row23 { grid-row-start: 2; grid-row-end: 4; } .row3 { grid-row-start: 3; grid-row-end: 4; } .col1 { grid-column-start: 1; grid-column-end: 2; } .col12 { grid-column-start: 1; grid-column-end: 3; } .col123 { grid-column-start: 1; grid-column-end: 4; } .col1234 { grid-column-start: 1; grid-column-end: 5; } .col2 { grid-column-start: 2; grid-column-end: 3; } .col23 { grid-column-start: 2; grid-column-end: 4; } .col234 { grid-column-start: 2; grid-column-end: 5; } .col3 { grid-column-start: 3; grid-column-end: 4; } .col34 { grid-column-start: 3; grid-column-end: 5; } .col4 { grid-column-start: 4; grid-column-end: 5; }
接下來,讓我們對vue-cli
添加的默認(rèn)文件進(jìn)行一些更改。
從src/components
文件夾中刪除HelloWorld.vue
,并從src/App.vue
中刪除所有與其相關(guān)的東西。對App.vue
中的 HTML 標(biāo)記和 CSS 樣式進(jìn)行以下修改。
<template> <div id="app"> <h2 class="row1 col12">Alligator Nest</h2> <a class="row1 col3">Travels</a> <a class="row1 col4">About</a> <div class="row2 col234"></div> </div> </template> html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; padding: 2%; height: 100%; display: grid; grid-template-rows: 20% 80%; grid-template-columns: 25% 25% 25% 25%; }
如果你在項(xiàng)目的根目錄中運(yùn)行npm run serve
,則可以將鼠標(biāo)懸停在瀏覽器中的localhost:8080
上,并查看框架布局。那些display:grid
屬性很有用!現(xiàn)在我們可以開始創(chuàng)建路由了。
在/components
文件夾中創(chuàng)建一個名為AboutPage.vue
的組件。它看起來像這樣:
<template> <div> <h3>About</h3> <p>Alligators were around during the time of the dinosaurs.</p> </div> </template> <script> export default { name: 'AboutPage', } </script> <style scoped> </style>
現(xiàn)在我們的main.js
文件需要/about
路由。它看起來像這樣。
import VueRouter from 'vue-router'; import Vue from 'vue'; import App from './App.vue'; Vue.config.productionTip = false; import VueRouter from 'vue-router'; Vue.use(VueRouter); import AboutPage from './components/AboutPage.vue'; const routes = [ { path: '/about', component: AboutPage }, ] const router = new VueRouter({ routes }) new Vue({ render: h => h(App), router }).$mount('#app');
最后,讓我們回到App.vue
,并將 “About” 的錨標(biāo)記更改為屬性為to="/about"
的<router-link>
標(biāo)簽。然后,將第二個div
更改為<router-view>
標(biāo)簽。確保保持網(wǎng)格定位類屬性不變。
現(xiàn)在,我們有了一個功能齊全的站點(diǎn)框架,并為 “About” 頁面處理了路由。
我們在此重點(diǎn)介紹路由功能,因此不會在樣式上話費(fèi)太多時間。盡管如此,我們也要讓Travels
頁面看起來更精致一些。
首先,創(chuàng)建一個TravelPage
,方法與創(chuàng)建AboutPage
相同。在main.js
中引用它。
還需要創(chuàng)建以下兩個組件,這些組件最終將嵌套在TravelPage.vue
中:
TravelAmericaPage.vue
<template> <div> <p>Alligators can be found in the American states of Louisiana and Florida.</p> </div> </template> <script> export default { name: 'TravelAmericaPage' } </script> <style scoped> </style>
TravelChinaPage.vue
<template> <div> <p>Alligators can be found in China's Yangtze River Valley.</p> </div> </template> <script> export default { name: 'TravelChinaPage' } </script> <style scoped> </style>
現(xiàn)在,讓我們同時更新main.js
和TravelPage.vue
,以使用children
來引用這些嵌套路由。必須將main.js
更新為對routes
常量具有以下定義:
const routes = [ { path: '/travel', component: TravelPage, children: [ { path: '/travel/america', component: TravelAmericaPage }, { path: '/travel/china', component: TravelChinaPage} ] }, { path: '/about', component: AboutPage } ];
請注意,子級的嵌套可以無限繼續(xù)下去。
并且TravelPage.vue
可以通過以下方式編寫:
TravelPage.vue
<template> <div id="travel"> <h3 class="row1">Travels</h3> <div class="flex-container row2"> <router-link to="/travel/america">America</router-link> <router-link to="/travel/china">China</router-link> </div> <router-view class="row3"></router-view> </div> </template> <script> export default { name: 'TravelPage' } </script> <style scoped> div { text-align: center; } #travel { display: grid; grid-template-rows: 20% 40% 40%; } .flex-container { display: flex; justify-content: space-around; } </style>
檢出localhost:8080
,你將看到 Travels 頁面中包含 2 個子頁面!當(dāng)你單擊任一鏈接時,我們的 URL 也會相應(yīng)更新。
以上是“Vue.js中如何使用嵌套路由”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞標(biāo)題:Vue.js中如何使用嵌套路由-創(chuàng)新互聯(lián)
網(wǎng)頁路徑:http://muchs.cn/article42/dejdec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站改版、定制網(wǎng)站、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容