Vue Router 是使用 Vue 框架的開發者，常會搭配使用的前端路由套件。若依照一般路由的規劃層狀結構習慣，如 view/azure/dashboard ，當中間的結構並沒有對應內容，可以用 Empty View 的方法來進行跳轉。這篇筆記下使用方法和重點設定。
觀念
由於每一次的跳轉，父層都需要有個 <router-view /> 的標籤才行。這點可以透過創造一個空的 EmptyRouterView.vue 檔，內容僅含一個 <router-view /> 即可
步驟
1. 新增一個 EmptyRouterView.vue
|
1 2 3 |
<template> <router-view></router-view> </template> |
2. route 的路徑規劃範例如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 當載入 /aws 下面的網址時，預設會跳轉到 /aws/home // 若輸入 /aws/about，會跳轉到 /aws/about { path: '/aws', component: EmptyRouterView, redirect: '/aws/home', children: [ { name: 'Home', path: 'home', component: () => import('../views/Index.vue') }, { name: 'About', path: 'about', component: () => import('../views/About.vue') } ] } |
參考資料
1. Vue Router Architecture and Nested Routes
按讚加入粉絲團
