[Vue Router] 具名視圖

TL;DR

具名視圖範例。

前置作業

範例會使用到Bootstrap的元件，所以需要先將Bootstrap給引入使用。

(引入Bootstrap參考)

參考資料

相關連結

---

示意圖

在前面的狀況，我們在一個頁面只會使用一個RouterView：

單個RouterView示意圖

接著示範如何同時使用多個RouterView：

多個RouterView示意圖

具名視圖範例

建立元件

除了元件A跟元件B以外，再額外新增一個元件C。

./src/components/ComponentC.vue

<template>
  <p>元件C</p>
</template>

建立namedview

新增一個namedview頁面，用來包住兩個命名視圖。

<template>
  <div class="row">
    <div class="col-6">
      <RouterView name="left"></RouterView>
    </div>
    <div class="col-6">
      <RouterView name="right"></RouterView>
    </div>
  </div>
</template>

RouterView的name

在RouterView上，加上name屬性，該屬性會對應到index.js內的設定。

設定路由(routes)

./src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/newpage',
      name: '新增頁面',
      component: () => import('../views/NewPage.vue'),
      children: [
        {
          path: 'a',
          name: '新增頁面內的元件A',
          component: ()=> import('../components/ComponentA.vue')
        },
        {
          path: 'b',
          name: '新增頁面內的元件B',
          component: ()=> import('../components/ComponentB.vue')
        },
        {
          path: 'namedview',
          name:'namedview',
          component: ()=>import('@/views/NamedView.vue'),
          children:[
            {
              path:'c2a',
              // 需要使用components，而不是component。並且內容為物件形式。
              components:{
                // left跟right是對應到namedview內的RouterView的name屬性
                left: ()=>import('@/components/ComponentC.vue'),
                right: ()=>import('@/components/ComponentA.vue')
              }
            },
            {
              path:'a2b',
              components:{
                left: ()=>import('@/components/ComponentA.vue'),
                right: ()=>import('@/components/ComponentB.vue')
              }
            }
          ]
        }
      ]
    }
  ]
})

export default router

NewPage側邊欄

./src/views/NewPage.vue

<template>
  <div class="container">
    <div class="row py-3">
      <div class="col-3">
        <div class="list-group">
          <RouterLink :to="{name:'新增頁面內的元件A'}" class="list-group-item list-group-item-action" aria-current="true">
            元件A
          </RouterLink>
          <RouterLink to="/newpage/b" class="list-group-item list-group-item-action">
            元件B
          </RouterLink>
          <RouterLink to="/newpage/namedview/c2a" class="list-group-item list-group-item-action">
            C to A
          </RouterLink>
          <RouterLink to="/newpage/namedview/a2b" class="list-group-item list-group-item-action">
            A to B
          </RouterLink>
        </div>
      </div>
      <div class="col-9">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script>
// import RWDTest from '../components/RWDTest.vue'
export default {
  components: {
    // RWDTest
  }
}
</script>

資料夾結構

完成範例時，資料夾結構如下：

.
├── README.md
├── index.html
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── _variables.scss
│   │   ├── base.css
│   │   ├── logo.svg
│   │   ├── main.css
│   │   └── main.scss
│   ├── components
│   │   ├── ComponentA.vue
│   │   ├── ComponentB.vue
│   │   ├── ComponentC.vue
│   │   ├── HelloWorld.vue
│   │   ├── RWDTest.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   └── icons
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── stores
│   │   └── counter.js
│   └── views
│       ├── AboutView.vue
│       ├── HomeView.vue
│       ├── NamedView.vue
│       └── NewPage.vue
└── vite.config.js