Vue Router

基本上，Vue只有單一的入口，也就是一定從App.vue開始執行，不像一般的網頁，可以直接打開任何的html檔案。所以，當我們的程式長大之後，就必須要靠router來幫忙了。首先，安裝Vue Router，目前最新的版本是4。由於我們使用的是Vue 3，所以，必須使用依據Vue 3改寫的Vue Router 4。

• Getting Started

首先，先安裝vue router:

npm install vue-router@4

我們現在先新增/src/route.ts

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/english',
      name: 'english',
      // component: EnglishDB
      // 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('./components/EnglishDB.vue')
    },
    {
      path: '/chemistry',
      name: 'chemistry',
      component: () => import('./components/ChemistryInput.vue')
    },
    {
      path: '/chemistry-radio',
      name: 'chemistry radio',
      component: () => import('./components/ChemistryRadio.vue')
    }
  ]
})

export default router

修改一下/src/main.ts，套用router。

// import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
// make sure to also import the coresponding css
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
**import router from './route'**
const vuetify = createVuetify({
  components,
  directives
})

// Make sure to _use_ the router instance to make the
// whole app router-aware.
createApp(App).use(vuetify).**use(router)**.mount('#app')

<aside> 📢 如果不認得import '@mdi/font/css/materialdesignicons.css’，請安裝@mdi/font

</aside>

npm install @mdi/font

修改一下/src/App.vue

先加入<RouterView />

<script setup lang="ts">
import { reactive, ref } from 'vue'
let drawer = ref(false)
let choice = reactive({ title: '英文', value: 'English' })
let items = [
  { title: '英文', value: 'English' },
  { title: '化學', value: 'ChemistryInput' },
  { title: '化學單選', value: 'ChemistryRadio' }
]

</script>

<template>
  <v-app class="rounded rounded-md">
    <v-app-bar>
      <v-icon icon="plus"></v-icon>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>Application bar</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer floating permanent v-model="drawer">
      <v-list>
        <v-list-item
          v-for="item in items"
          :title="item.title"
          :key="item.value"
          :active="item.value === choice.value"
          @click="choice.value = item.value"
        >
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main class="d-flex flex-column align-start justify-start mb-6" style="min-height: 300px">
      <!-- <v-select label="請選擇" v-model="choice.value" :items="items" item-title="title" item-value="value">
      </v-select> -->
        
      <Suspense>
        **<RouterView />**
        <!-- <English v-if="choice.value === 'English'" />
        <ChemistryInput v-else-if="choice.value === 'ChemistryInput'" />
        <ChemistryRadio v-else /> -->
      </Suspense>
    </v-main>
  </v-app>
</template>

接下來，修改items，改用to:

let items = [
  { title: '英文', **to: '/english'** },
  { title: '化學', to: '/chemistry' },
  { title: '化學單選', to: '/chemistry-radio' }
]

v-list-item改用to

        <v-list-item
          v-for="item in items"
          :title="item.title"
          **:key="item.title"**
          **:to="item.to"**
        >
        </v-list-item>

/src/App.vue

<script setup lang="ts">
import { ref } from 'vue'
let drawer = ref(false)
let items = [
  { title: '英文', to: '/english' },
  { title: '化學', to: '/chemistry' },
  { title: '化學單選', to: '/chemistry-radio' }
]

</script>

<template>
  <v-app class="rounded rounded-md">
    <v-app-bar>
      <v-icon icon="plus"></v-icon>
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-app-bar-title>Application bar</v-app-bar-title>
    </v-app-bar>
    <v-navigation-drawer floating permanent v-model="drawer">
      <v-list>
        <v-list-item
          v-for="item in items"
          :title="item.title"
          :key="item.title"
          :to="item.to"
        >
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main class="d-flex flex-column align-start justify-start mb-6" style="min-height: 300px">
      <Suspense>
        <RouterView />
      </Suspense>
    </v-main>
  </v-app>
</template>