Vue-4 路由的配置和調用,命名路由和命名視圖,嵌套路由,重定向和別名
Vue-router的安裝和基本配置
路由是 Vue 通過操作切換或調用組件的另一種方式。
常見應用場景就是後臺管理系統中的選項卡操作。
比如某個後臺管理系統的側邊欄有商品管理、用戶管理、訂單管理選項,在點擊左側的菜單時,右側內容部分展示對應的管理模塊。
要在 vue-cli
中使用 vue
的路由,要先在當前項目中安裝 vue-router
依賴包,加以配置之後才能使用。
路由是 vue-cli
項目必備的功能,所以一般情況下,在安裝項目時,會在是否安裝路由這裏選擇 yes。
如果在安裝項目的同時就安裝了路由,那麼項目的 src
文件夾中會自動有一個 router
的文件夾,路由已經被配置好了。只需要向裏面添加內容就好了。
但是我們還是要了解路由配置的整個過程。
如果沒有在初始化項目模板時安裝路由,那麼路由的配置總共需要以下幾個步驟。
1. 安裝vue-router依賴包
npm i vue-router --save
2. 配置路由
路由一般都配置在 src 文件夾中:
// 項目的src目錄
src
└── App.vue
└── main.js
└── assets
└── components
└── good-list.vue
└── user-list.vue
└── order-list.vue
└── router // 路由配置文件夾
└── index.js // 路由配置文件
路由配置文件 index.js:
// router>index.js
import Vue from 'vue'
// 導入路由依賴包
import Router from 'vue-router'
// 導入被路由的組件,每個路由應該映射一個組件,要配置三個菜單路由,就應該映射到三個組件
import GoodList from './components/good-list'
import UserList from './components/user-list'
import OrderList from './components/order-list'
Vue.use(Router)
// 創建 vueRouter 實例,並導出
export default new Router({
routes: [
// 一個路由用一個對象包裹,對象中的每個鍵值對代表不同的意義
// 我們先介紹 path 和 component
{ path: '/good-list', component: GoodList },
{ path: '/user-list', component: UserList },
{ path: '/order-list', component: OrderList }
]
});
此時路由還不能使用,因爲當前的 index.js
只是一個單獨的 js 文件,想要使用,還需要將 router 實例導入到根組件的實例化中。
// main.js
import Vue from 'vue'
import App from './App'
// 從 router>index.js 文件中導入 router 實例
import router from './router'
Vue.config.productionTip = false;
new Vue({
el: '#app',
// 將 router 作爲參數傳到這裏,整個項目就能使用路由了
router,
components: { App },
template: '<App/>'
})
3. 調用路由
<!-- home.vue -->
<template>
<div class="home">
<!--
錨點:
用router-link標籤,提供切換視圖的動作。
to屬性的值是路由配置中的path
-->
<router-link to="/good-list">商品列表</router-link>
<router-link to="/user-list">用戶列表</router-link>
<router-link to="/order-list">訂單列表</router-link>
<!--
顯示路由視圖
點擊 router-link 菜單,在 router-view 所在的位置渲染該 path 對應的 component
-->
<router-view />
</div>
</template>
有時候切換組件不會通過錨點,而是在代碼執行並完成了某些操作之後。比如點擊登錄按鈕,只有在登錄成功之後才顯示首頁。那麼路由組件的切換就是在登錄成功的回調函數中執行,這個時候就不能用錨點,而是 JS 跳轉。
// ...
login() {
setTimeout(() => {
// 3s 之後切換路由
this.$router.push('/user-list');
/*
也可以這樣寫:
this.$router.push({
path: '/user-list'
});
*/
}, 3000);
}
// ...
命名路由和命名視圖
1. 命名路由
除了利用 path
屬性調用路由之外,我們還可以在配置路由時,爲每個路由設置一個 name
值,然後通過 name
值調用路由,兩種方式有各自的應用場景。我們先說命名路由的使用。
// router>index.js 中的 routes
routes: [
{
path: '/good-list',
component: GoodList,
// 爲路由命名,這個名稱不一定和 path 保持一致
// 但是一般情況下,我們遵從見名知意的規則
name: 'good-list'
},
{
path: '/user-list',
component: UserList,
name: 'user-list'
},
{
path: '/order-list',
component: OrderList,
name: 'order-list'
}
]
調用命名路由:
<!-- to屬性中是一個對象,所以要對 to 屬性使用 v-bind 指令 -->
<router-link :to="{name: 'good-list'}">商品列表</router-link>
<router-link :to="{name: 'user-list'}">用戶列表</router-link>
<router-link :to="{name: 'order-list'}">訂單列表</router-link>
// js 調用
this.$router.push({
name: 'user-list'
});
2. 命名視圖
同時 (同級) 展示多個組件,可以讓所有組件通過作爲子組件被同一個父組件調用,也可通過 <router-view>
標籤的 name
屬性同級展示多個視圖。在配置時需要使用 components
而不是 component
。
// router>index.js 中的 routes
routes: [
{
path: '/',
components: {
/*
當路由路徑爲 '/' 時
router-view 標籤如果不設置 name 屬性,就渲染 GoodList 組件
router-view name 值爲 user-list 時,渲染 UseList 組件
router-view name 值爲 order-list 時,渲染 OrderList 組件
它們可以渲染一個,也可以被同時渲染,不互斥
*/
default: GoodList, // 可選
'user-list': UserList,
'order-list': OrderList
}
}
]
調用命名視圖:
...
<router-view />
<router-view name="user-list"/>
<router-view name="order-list"/>
...
注:
如果一個組件的父組件是固定的,比如導航,側邊欄,頁面內容,那就使用子組件導入父組件的方式調用它們。
如果一個組件,可能會被很多不同的組件調用,那麼每個調用它的父組件都要先導入該組件,傳入實例的 components
才能使用,那樣太麻煩了,又造成了無法解決的莫名其妙的代碼冗餘。這種場景就使用命名視圖,代碼會更簡潔。
嵌套路由和路由的封裝
有時候某個路由組件中會包含屬於這個組件本身的路由操作。如 Angular 的官網。
現在給一個示例,比如一級菜單有商品列表,用戶列表,訂單列表。訂單列表中還可以有全部,已付款,已發貨等操作。切換子菜單也可以切換內容。
這種情況我們就要使用到子路由的配置。
// router>index.js 中的routes
routes: routes: [
{
path: '/good-list',
component: GoodList
},
{
path: '/user-list',
component: UserList
},
{
path: '/order-list',
component: OrderList,
// order-list 的子路由配置在 children 中
children: [
{
// 子路由配置時不加 '/'
// 加 '/' 代表一級路由,就和 order-list 同級了
path: 'order-list-1',component: OrderList1
},
{
path: 'order-list-2', component: OrderList2
},
{
path: 'order-list-3', component: OrderList3
}
]
}
]
在 <OrderList>
組件中調用其子路由:
<div class="order-list">
<!-- 調用子路由,要加父級路徑 -->
<router-link to="/order-list/order-list-1">全部</router-link>
<router-link to="/order-list/order-list-2">待付款</router-link>
<router-link to="/order-list/order-list-3">待收貨</router-link>
<!-- 渲染子路由視圖 -->
<router-view />
</div>
如果子路由中還需要子路由,那就在子路由中繼續寫。 children
。
如果路由的配置結構特別複雜,可能要嵌套多級路由,我們可以按模塊將路由單獨封裝,最終引入到 router
中的 index.js
裏。
// router>order-list.js
import OrderList from '@/components/OrderList'
import OrderList1 from '@/components/OrderList1'
import OrderList2 from '@/components/OrderList2'
import OrderList3 from '@/components/OrderList3'
// 將 order-list 的配置導出
export default {
path: '/order-list',
component: OrderList,
children: [{
path: 'order-list-1',
component: OrderList1
},
{
path: 'order-list-2',
component: OrderList2
},
{
path: 'order-list-3',
component: OrderList3
}
]
};
// router>index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/components/GoodList'
import UserList from '@/components/UserList'
// 導入 order-list 配置
import OrderList from './order-list'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/good-list',
component: GoodList
},
{
path: '/user-list',
component: UserList
},
OrderList
]
});
注:
這樣的封裝不會對 main.js
中的配置有任何影響,main.js
中依舊只引入 router.js
,在實例化時傳入 router
。
重定向和別名
1. 重定向
有時候一個組件中的子路由有很多,但是我們在切換到這個組建時,希望能展示其中的某個子路由內容,不然頁面會出現留白,用戶體驗很差。
// router>order-list.js
export default {
path: '/order-list',
component: OrderList,
// 重定向,當菜單切換到order-list時,order-list-1的內容會默認顯示
// 頁面中不會出現留白
redirect: '/order-list/order-list-1'
children: [{
path: 'order-list-1',
component: OrderList1
},
{
path: 'order-list-2',
component: OrderList2
},
{
path: 'order-list-3',
component: OrderList3
}
]
};
這樣能實現效果,但是如果子路由嵌套太多,redirect
要拼接的父級路由就特別長,這種情況可以用命名路由:
// router>order-list.js
export default {
path: '/order-list',
component: OrderList,
redirect: {
// 不用拼接冗長的路徑
name: 'order-list-1'
}
children: [{
path: 'order-list-1',
component: OrderList1,
name: 'order-list-1'
},
{
path: 'order-list-2',
component: OrderList2
},
{
path: 'order-list-3',
component: OrderList3
}
]
};
2. 別名
Vue 也允許我們爲某個路由起一個別名,訪問這個別名也是在訪問這個路由。
// router>index.js
export default new Router({
routes: [
{
path: '/good-list',
component: GoodList,
// 路由的路徑爲 '/another-name' 時就代表 '/good-list'
alias: '/another-name'
},
{
path: '/user-list',
component: UserList
},
OrderList
]
});