【一】Vue-router介紹
vue-router是vue的頁面的連結路徑管理系統。由於Vue開發時對路由支援不足，於是官方補充了vue-router外掛。vue的單頁面應用(SPA)是基於路由和元件的，路由用於設定訪問路徑，並且將路徑和元件對映起來。
傳統的頁面應用是用一些超連結來實現頁面的切換和調轉的。在vue-router的單頁面應用中，則是路徑之間的切換，實際上就是元件的切換。
【二】安裝
【1】安裝命令
npm install vue-router
【2】建立元件
如果在一個模組化工程中使用它，必須要透過 Vue.use() 明確地安裝路由功能，用vue-cli生產了我們的專案結構，src檔案目錄下會有一個router資料夾，此處就是編寫路由元件的地方。在src/router/index.js，這個檔案就是路由的核心檔案：
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目錄下的Hello.vue元件
Vue.use(Router) //Vue全域性使用Router
export default new Router({
routes: [ //配置路由，這裡是個陣列
{ //每一個連結都是一個物件
path: '/', //連結路徑
name: 'Hello', //路由名稱，
component: Hello //對應的元件模板
}，{
path:'/hi',
component:Hi,
children:[ //子路由,巢狀路由 （此處偷個懶，免得單獨再列一點）
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})
【3】全域性元件
-html：全域性元件：
-<router-view></router-view> # 顯示頁面元件
-<router-link></router-link> # 路由跳轉【相當於a標籤】
-js中：
this.$router # 路由物件，路由跳轉
this.$route # 當前路由物件，跳轉攜帶資料，從這裡取出來
【三】簡單路由跳轉
【1】透過元件跳轉
<el-button @click="handleAbout">按鈕跳關於</el-button>
【2】透過路由js跳轉
<el-button @click="handleAbout">按鈕跳關於</el-button>
<script>
export default {
name: 'HomeView',
methods: {
handleAbout() {
this.$router.push('/about')
}
</script>
【四】高階路由跳轉
【1】路由js跳轉--傳物件
// 物件裡面放path
handleAbout2(){
this.$router.push({
path:'/about'
})
}
// 根據別名跳轉 name
handleAbout2(){
this.$router.push({
name:'about'
})
}
},
// 攜帶資料 在?後面的資料
handleAbout2() {
this.$router.push({
name: 'about',
query: {name: this.name} //資料會攜帶在位址列中問號？後面 http://192.168.1.24:8080/about?name=green
})
}
},
// 獲取攜帶的資料,透過this.$route.[資料鍵名]，$route是當前路由物件
// 在about頁面元件中
data(){
return{
name : ''
}
},
created() {
this.name = this.$route.query.name
// 這樣就能拿到資料
},
// 攜帶資料在位址列中 不是?後面的引數
// 首先需要在路由元件中繫結
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about/:id', // 用冒號:繫結變數 之後就需要在位址列後面跟一個資料才能訪問 就像django路由層的轉換器
name: 'about',
},
//
// 給跳轉按鈕配置 params屬性
handleAbout2() {
this.$router.push({
name: 'about',
params: {id:this.id}
})
// 取出params屬性值
export default {
name: 'about',
data() {
return {
id: ''
}
},
created() {
this.id = this.$route.params.id // 透過params.屬性名取值
},
}
【2】透過標籤跳轉--傳物件
可以用在to前面價格冒號將其繫結到某個物件上，那麼就可以這個物件裡面定義name，query，params等
<router-link :to="{}">點我跳轉關於頁面關於</router-link>
【五】路由巢狀--子路由
常見的側邊欄樣式就是用路由巢狀來實現的，點選左邊的按鈕，左邊的內容不變，右邊主題內容變化
/user/johnny/profile /user/johnny/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
【1】配置子路由
const routes = [
{
path: '/demo',
name: 'demo',
component: RouterDemoView,
// 多級路由 用children屬性配置，他是一個陣列套物件
// 需要有幾個子路由就寫幾個物件
children: [
{ // path是子路由的路徑
path: 'home', // 此處不能寫成/home,
// component是子路由用到的元件
component: HomeView2
},
{
path: 'good', // 此處不能寫成/good,
component: GoodsView
},
{
path: 'order', // 此處不能寫成/order,
component: OrdersView
}
]
}
]
【2】寫路由子元件
略...
【3】配置路由跳轉
<template>
<div id="demo">
<h1>路由巢狀</h1>
<router-link to="/demo/home">
<el-button>首頁</el-button>
</router-link>
<br>
<router-link to="/demo/good">
<el-button>商品</el-button>
</router-link>
<br>
<router-link to="/demo/order">
<el-button>訂單</el-button>
</router-link>
// 需要用 router-view標籤來渲染子元件
<router-view></router-view>
</div>
</template>
【六】相關api
【1】VueRouter
VueRouter： VueRouter 類用於建立一個新的路由例項。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
// 配置路由
]
})
【2】routes
routes： 路由配置陣列，用於定義路由對映關係。
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
})
【3】router-link
router-link： 用於在 Vue 元件中宣告式導航到路由的元件。
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
【4】router-view
router-view： 用於渲染匹配的路由元件。
<router-view></router-view>
【5】跳轉
// push： 在程式設計式導航中使用，將新路由推送到歷史記錄棧中。
router.push('/home')
// replace： 在程式設計式導航中使用，替換當前路由而不是新增新條目。
router.replace('/home')
// go、back、forward： 控制瀏覽器歷史記錄的導航。
router.go(-1) // 後退一頁
router.back() // 後退一頁
router.forward() // 前進一頁
【6】守衛
// beforeEach： 路由跳轉前的全域性守衛，可以用於執行某些驗證或者攔截。
router.beforeEach((to, from, next) => {
// ...
})
// beforeResolve： 在導航被確認之前，全域性守衛。
router.beforeResolve((to, from, next) => {
// ...
})
// afterEach： 導航成功完成後的全域性鉤子。
router.afterEach((to, from) => {
// ...
})
【七】路由守衛
當進行路由跳轉的時候可能需要在路由跳轉的不同階段執行一些列邏輯或者操作，比如路由跳轉前的許可權校驗，在導航被確認之前執行某些操作，以及在導航成功之後執行一些操作
為了實現這些需求，Vue Router 提供了一些全域性的導航守衛，其中就包括 beforeEach、beforeResolve 和 afterEach 這三個 API。
【1】beforeEach
beforeEach 是一個全域性的導航守衛，會在路由跳轉之前被呼叫。您可以使用它來進行許可權驗證、路由攔截等操作。該方法接收三個引數：
to：即將跳轉的目標路由物件；from：當前導航正要離開的路由物件；next：一個函式，用於告知 Vue Router 是否繼續導航。呼叫next()表示繼續導航，而呼叫next(false)或者傳遞一個路由路徑表示取消導航，並將使用者重定向到另一個路由。
下面是一個示例，演示如何在 beforeEach 中進行路由許可權驗證：
router.beforeEach((to, from, next) => {
// 模擬許可權驗證邏輯
const isAuthenticated = checkAuth() // 假設有一個函式用於檢查使用者是否已經登入
if (to.meta.requiresAuth && !isAuthenticated) {
// 如果路由需要登入許可權而使用者未登入，則重定向到登入頁
next('/login')
} else {
// 其他情況下繼續導航
next()
}
})
【2】beforeResolve
beforeResolve 導航守衛與 beforeEach 類似，但是它會在路由導航被確認之前被呼叫，也就是在 beforeEach 和路由元件內守衛之後、導航被確認之前呼叫。這意味著在 beforeResolve 中的操作是在路由元件被解析之後，但在它們被渲染之前執行。
beforeResolve 方法的引數與 beforeEach 相同，它們的用法也非常類似。一般情況下，您可以使用 beforeEach 就可以滿足大多數需求，但如果需要在元件解析之後執行某些操作，可以考慮使用 beforeResolve。
【3】afterEach
afterEach 是一個全域性的導航守衛，會在路由成功跳轉之後被呼叫，不管是從哪個路由跳轉到哪個路由，都會執行 afterEach 中的邏輯。它接收兩個引數：
to：即將跳轉的目標路由物件；from：當前導航離開的路由物件。
與 beforeEach 不同，afterEach 中不需要呼叫 next() 函式。您可以在 afterEach 中執行一些與導航完成後的清理工作、日誌記錄等操作
router.afterEach((to, from) => {
// 在控制檯中記錄當前導航的資訊
console.log(`Navigated from ${from.path} to ${to.path}`)
})