瀏覽器 wid 頁面 ini view index 為我 接收參數 管理系統

簡介

因為我們用Vue開發的頁面是單頁面應用,就相當於只有一個主的index.html,這時候我們就不能使用a標簽來進行頁面的切換了,所以這時候我們今天的主角Vue-Router就閃亮的登場了 Vue-Router就是我們頁面的鏈接路徑管理系統

入門初始化

我們在使用vue-cli初始化我們代碼時,選擇安裝Vue-Router即可 我們可以在我們的項目中src>router>index.js,這裏的index.js就是我們寫路由的地方了,我們來解讀一下裏面代碼是幹什麽用的,

而我們要是想切換其他的頁面呢,只需要在後面繼續寫路由就行然後我們去新建這個頁面,並編寫一些東西顯示出來,首先是我們的主頁HelloWorld,

<router-link to="/Fond">去找二級小弟</router-link> //這裏的標簽就相當於 a 標簽 to 後面跟的就是地址
復制代碼

在去新建Fond頁面在頁面中顯示

子路由

子路由的情況一般用在一個頁面有他的基礎模版，然後它下面的頁面都隸屬於這個模版，只是部分改變樣式 在index.js組件中編寫

在Fond組件中編寫我們新建load組件在瀏覽器中預覽我們可以在瀏覽器地址欄看到首頁默認顯示的為http://localhost:8080,
當我們點擊去找fond,地址後面就加上了fond,http://localhost:8080/Fond,此時頁面上就只顯示fond組件裏的內容,
當再點擊去我小弟那裏,地址欄就變成了fond/load,頁面上即顯示了fond組件裏的內容也顯示了load組件裏的內容

路由傳遞參數

作用

接收上一級頁面傳過來的參數

實操

通過<router-link> 標簽中的to傳參 首先我們需要在Fond組件中添加

這裏的name:就是我們在路由配置那裏定義的名字,我們可以看前面的代碼片段,它的功能相當於跳轉到哪,而params:{}就是用來進行參數傳遞的 我們需要在Load組件中接收參數通過$route.params.參數名字

效果

我們在瀏覽器中看下效果

我們首先點擊去我小弟那裏,在這裏我們沒有進行參數傳遞,所以顯示不出來我們傳的參數
我們點擊去找三級小弟,在這裏我們進行了參數傳遞,所以在頁面上我們可以看到我們傳遞的值

單頁面多路由

vue-router爬坑記