Vue是目前最熱門的前端框架之一，它不僅簡潔易用，而且具有強大的擴充性，其中一個值得關注的外掛就是vue-router。 vue-router是Vue官方路由插件，它可以更好地控制Vue應用中的路由導航，使路由與元件之間的關係更加清晰，提升了使用者的互動體驗。本文將詳細解讀Vue-router的使用方法及妙用。
一、安裝和使用
在使用vue-router之前，需要先安裝它。可以使用npm套件管理器來安裝vue-router插件。安裝指令如下：
npm install vue-router
登入後複製
安裝完成之後，在main.js檔案中引入並使用vue-router：
import VueRouter from 'vue-router'
import routes from './router'
const router = new VueRouter({
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
})登入後複製
其中，routes參數指定路由配置，可以根據專案需求進行修改。然後在Vue實例化物件中傳入router參數，啟用路由功能。
二、基礎設定
路由設定包含路由表和路由元件兩個部分。路由表主要用於配置路由路徑和對應的元件，路由元件是對應路由路徑的元件視圖。
在src目錄下建立router.js文件，定義路由表和元件。如下：
import Home from './views/Home.vue'
import About from './views/About.vue'
export default [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]登入後複製
然後在main.js中引入路由配置，並傳入VueRouter實例中。其中，路由路徑使用path屬性進行配置，component屬性指定對應的路由元件。
三、參數傳遞
Vue-router也支援傳遞參數，可以透過$route物件取得到傳遞的參數。
- 路徑傳參
路徑傳參是指將參數放在路由路徑的一部分，例如：
{
path: '/user/:userId',
name: 'user',
component: User
}登入後複製
當使用者存取/user/ 1時，路由會將1作為參數userId傳遞給User組件。
- 查詢參數傳參
查詢參數傳參是指將參數以鍵值對的形式放在路由路徑後，以問號?分隔，連續的鍵值對用&連接，例如：
{
path: '/user',
name: 'user',
component: User
}登入後複製
當使用者存取/user?id=1&name=john時，路由會將{id: 1, name: 'john'}作為查詢參數傳遞給User元件。
四、重定向與巢狀路由
- 重定向
重定向是指將使用者在瀏覽器中存取某個路徑時，自動跳到另一個路徑。如下程式碼實作了路徑/about自動跳到路徑/home的功能：
import Home from './views/Home.vue'
import About from './views/About.vue'
export default [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
redirect: '/home'
}
]登入後複製
- 巢狀路由
巢狀路由是指在父元件中使用子組件的路由。例如，在頭部和底部為固定結構的頁面中，需要嵌套「內容」元件，三層結構看起來是這樣的：
header
/
L R
|
content
|
footer登入後複製
嵌套路由需要在父元件內部使用標籤來佔位，並在父元件的路由表內部定義子路由表。例如：
const home = {
template: `
<div>
<h2>Home</h2>
<router-view></router-view>
</div>
`
}
const about = {
template: '<div>About</div>'
}
const contact = {
template: '<div>Contact</div>'
}
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: home,
children: [
{
path: 'about',
name: 'about',
component: about
},
{
path: 'contact',
name: 'contact',
component: contact
}
]
}
]
})登入後複製
在home元件中使用了標籤作為子元件「about」和「content」的佔位符。在路由表中，父元件「home」配置的子路由表中包含了「about」和「content」兩個子路由路徑。
五、路由守衛
- 全域守衛
全域守衛會在路由切換前觸發，其中beforeEach()為全域前置守衛，可以進行權限驗證、登陸驗證等操作。
router.beforeEach((to, from, next) => {
// 验证用户是否登陆
if(to.path === '/login') {
next();
} else {
let token = localStorage.getItem('token');
if(token === null || token === '') {
next('/login');
} else {
next();
}
}
})登入後複製
全域後置守衛用於路由切換後觸發，用於處理頁面載入的進度條等操作。
- 路由獨享守衛
路由獨享守衛用於針對某個路由做出特定的處理，在路由配置中新增beforeEnter屬性定義即可。
const router = new VueRouter({
routes: [
{
path: '/admin',
name: 'admin',
component: admin,
beforeEnter: (to, from, next) => {
// 验证是否为管理员账户
let token = localStorage.getItem('token');
if(token === 'admin') {
next();
} else {
next('/');
}
}
}
]
})登入後複製
- 元件內守衛
元件內守衛主要用於對目前元件進行處理。包括：beforeRouteEnter，beforeRouteUpdate和beforeRouteLeave三個守衛函數。
beforeRouteEnter函數在元件進入之前觸發，在該函數中無法直接存取元件實例，但可以透過next回呼函數傳遞元件實例進行處理。
export default {
data () {
return {
user: {}
}
},
beforeRouteEnter (to, from, next) {
axios.get(`/api/user/${to.params.id}`).then(response => {
next(vm => vm.setUser(response.data.user))
})
},
methods: {
setUser (user) {
this.user = user
}
}
}登入後複製
beforeRouteUpdate函數由於元件之間的路由跳轉不會重新建立實例，因此需要使用beforeRouteUpdate函數進行處理。
export default {
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
},
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}登入後複製
beforeRouteLeave函數在元件即將離開時觸發，用於處理未儲存的表單資料等操作。
export default {
beforeRouteLeave (to, from, next) {
// 如果表单已保存或者页面没有修改，直接离开该页面
if (this.saved || window.confirm('尚未保存，确定要离开吗？')) {
next()
} else {
next(false)
}
}
}登入後複製
六、總結
使用vue-router外掛程式可以為Vue應用程式中的路由導航提供強大的控制能力，從而提升使用者的互動體驗。本文介紹了vue-router的基礎配置、參數傳遞、重定向和嵌套路由及路由守衛等功能，可以幫助開發者更好地使用vue-router插件。
以上是Vue中使用vue-router的妙用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
