App.vue

      <div class="block-left">
        <input type="checkbox" class="checkbox" />
        <h4>進場起始時間</h4>
        <datetime v-model="date" input-id="startDate">
          <input type="datetime-local" v-model="value1" />
        </datetime>

        <input type="checkbox" class="checkbox" />
        <h4>離場起始時間</h4>
        <datetime v-model="date" input-id="startDate">
          <input type="datetime-local" v-model="value2" />
        </datetime>
      </div>

      <div class="block-right">
        <h4>進場結束時間</h4>
        <datetime v-model="date" input-id="startDate">
          <input type="datetime-local" v-model="value3" />
        </datetime>

        <h4>離場結束時間</h4>
        <datetime v-model="date" input-id="startDate">
          <input type="datetime-local" v-model="value4" />
        </datetime>
      </div>
      <div class="gwee">
        <button @click="search">搜尋</button>
        <button @click="cancel">取消</button>
      </div>

      <div class="east">
        <button @click="printPage" class="image-button">
          <img src="./assets/printer.jpg" alt="./assets/printer.jpg" />
        </button>
        <button @click="downloadPage" class="image-button">
          <img src="./assets/icon.jpg" alt="./assets/icon.jpg" />
        </button>
      </div>

      <table class="record">
        <hr class="my-6" />
        <div class="row">
          <thead>
            <tr>
              <th>
                <input type="checkbox" class="checkbox" />
              </th>
              <th>序</th>
              <th>車牌號碼</th>
              <th>車輛類別</th>
              <th>車輛類型</th>
              <th>駕駛人</th>
              <th>駕駛人公司</th>
              <th>預約樓層</th>
              <th>拜訪公司</th>
              <th>進場時間</th>
              <th>離場時間</th>
              <th>預約時間</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in records" :key="record.序">
              <td><input type="checkbox" /></td>
              <td>{{ record.序 }}</td>
              <td>{{ record.車牌號碼 }}</td>
              <td>{{ record.車輛類別 }}</td>
              <td>{{ record.車輛類型 }}</td>
              <td>{{ record.駕駛人 }}</td>
              <td>{{ record.駕駛人公司 }}</td>
              <td>{{ record.預約樓層 }}</td>
              <td>{{ record.拜訪公司 }}</td>
              <td>{{ record.進場時間 }}</td>
              <td>{{ record.離場時間 }}</td>
              <td>{{ record.預約時間 }}</td>
            </tr>
          </tbody>
        </div>
      </table>
    </div>
  </div>

  <div class="right-section">
    <h3>楊梅物流中心</h3>
    <h4>車輛進出紀錄</h4>
    <img src="./assets/Group2.png" width="50" height="50" />
    <div class="adef">
      <h5>駕駛公司:A物流公司</h5>
      <h5>駕駛人:王先生</h5>
      <h5>車牌號碼:Ac-2345</h5>
      <h5>車種:貨車</h5>
      <h5>進場時間:2023/06/23 12:00</h5>
    </div>
    <div class="adef">
      <img src="./assets/Group2.png" width="50" height="50" />
      <h5>駕駛公司:A物流公司</h5>
      <h5>駕駛人:王先生</h5>
      <h5>車牌號碼:Ac-2345</h5>
      <h5>車種:貨車</h5>
      <h5>進場時間:2023/06/23 12:00</h5>
    </div>
  </div>
</div>

<router-link to="/"></router-link>
<router-link to="/page2"></router-link>
<a href="/">page1</a> |
<a href="/page2">page2</a>
<router-view></router-view>

main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app');

index.js
// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import page1 from '@/components/page1.vue';
import page2 from '@/components/page2.vue';

Vue.use(VueRouter);

const routes = [
{
path: '/page1',
name: 'Page1',
component: page1
},
{
path: '/page2',
name: 'Page2',
component: page2
},
];

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});

export default router;