路由
- 1. vue-router 基本使用
- 安裝
- 使用
- 說明
- 路由的默認路徑
- 修改為 history 模式
- router-link 補充
- tag
- replace
- linkActiveClass
- 代碼路由跳轉
- 動態路由
- 路由懶加載
- 懶加載效果
- 懶加載方式
- 2. vue-router 嵌套路由
- 3. 引數傳遞
- 4. 導航守衛
- 5. keep-alive
1. vue-router 基本使用
vue-router 是 Vue.js 官方的路由插件，適合用戶構建單頁面應用，
vue-roter 是基于路由和組件的：
- 路由用于1訪問設定路徑，將路徑和組件映射起來，
- 在 vue-roter 的單頁面應用中，頁面的路徑的改變就是組件的切換，
安裝
步驟一：按照 vue-router
npm install vue-router --save
步驟二：在模塊化工程中使用它（因為是一個插件，所以可以通過Vue.use()來安裝路由功能）
- 第一步：匯入路由物件，并且呼叫
Vue.use(VueRouter) - 第二步：創建路由實體，并且傳入路由映射配置
- 第三步：在 Vue 實體中掛載創建的路由實體
使用
首先，建立路由和組件之間的映射關系，
通過 router-link控制路由的跳轉，
隨著路由的跳轉，router-view被對應組件替換，
說明
<router-link> 該標簽是一個 vue-router 中已經內置的組件，它會被渲染成一個<a>標簽，
<router-view>該標簽會根據當前的路徑，動態地將路徑對應的組件渲染到<router-view>的位置，
網頁的其他內容，比如頂部的標題、導航，或者底部的一些著作權資訊等會和<router-view>處于同一個等級，在路由切換時，切換的是<router-view>掛載的組件，其他內容不會發生改變，
路由的默認路徑
修改為 history 模式
router-link 補充
tag
replace
linkActiveClass
代碼路由跳轉
動態路由
路由懶加載
懶加載效果
懶加載方式
2. vue-router 嵌套路由
如果我們路由配置如下后，猜猜會發生什么？
可以看到按鈕消失了，這是因為B的組件直接替換了basic組件，
所以，我們可以知道children屬性的作用就是如果路由匹配了children中的組件，那么將children中的組件在將在父路由組件中的<router-view>的位置進行替換，
3. 引數傳遞
4. 導航守衛
5. keep-alive
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303322.html
標籤：其他
下一篇：java版Spring Cloud+SpringBoot+mybatis+uniapp b2b2c o2o 多商家入駐商城 直播帶貨商城 電子商務原始碼