路由是 Laravel Vue 中極為重要的一部分,它可以幫助我們實現頁面跳轉、權限管理、參數傳遞等多種功能。下面對 Laravel Vue 中的路由進行詳細介紹。
首先需要在 Laravel 端定義路由,在routes/web.php
中添加以下代碼:
Route::get('/users', 'UserController@index'); // 定義 GET 請求的路由
Route::post('/users', 'UserController@store'); // 定義 POST 請求的路由
Route::put('/users/{id}', 'UserController@update'); // 定義 PUT 請求的路由,并傳遞參數
Route::delete('/users/{id}', 'UserController@destroy'); // 定義 DELETE 請求的路由,并傳遞參數
上述代碼定義了四個請求方式,分別是 GET、POST、PUT、DELETE。其中 GET 請求不需要傳遞參數,其他三個請求需要傳遞id
參數。
在 Vue 端,需要使用 Vue Router 進行路由管理。在src/router/index.js
中添加以下代碼:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' // 引入組件
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home // 將組件與路由對應
},
{
path: '/about',
name: 'about',
component: () =>import(/* webpackChunkName: "about" */ '../views/About.vue') // 懶加載組件
},
{
path: '/users',
name: 'users',
component: () =>import('../views/Users.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在上述代碼中,我們引入了三個組件,分別是 Home、About、Users。它們與 Laravel 定義的路由對應,我們可以根據需要進行頁面跳轉。其中,使用了懶加載技術,可以加速頁面的加載速度。
除了頁面跳轉,路由還可以實現權限管理。我們可以在路由定義中添加meta
字段,來標記當前頁面需要的權限。例如:
{
path: '/users',
name: 'users',
component: () =>import('../views/Users.vue'),
meta: { requiresAuth: true } // 需要登錄才能訪問的頁面
}
通過在路由定義中添加meta
,我們可以在全局前置守衛中進行判斷。在src/router/index.js
中添加以下代碼:
router.beforeEach((to, from, next) =>{
if (to.matched.some(record =>record.meta.requiresAuth)) {
if (store.getters.isLoggedIn) { // 判斷是否已登錄
next()
return
}
next('/login') // 沒有登錄,跳轉到登錄頁面
} else {
next()
}
})
在上述代碼中,我們使用了全局前置守衛來判斷當前頁面是否需要登錄。如果需要登錄,則判斷用戶是否已登錄,如果已登錄則放行,否則跳轉到登錄頁面。