Vue3學習（十）之 頁面、菜單、路由的使用

• 2021 年 11 月 1 日
• 筆記
• vue3

一、前言

好幾天沒更文了，周末真的太冷了，在家躺了一天不愛動。今天給暖氣了，相對不那麼冷了，就可以繼續更文了。

由文章標題不難看出，就是實現點擊菜單跳轉的意思，我寫的很直白了，哈哈。

二、實現點擊菜單跳轉

1、統一頁面命名方式

我們先將頁面命名統一，都用小寫形式，將Home、About頁面都改為小寫，接著再將router中index.ts修改。

示例程式碼如下：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/home.vue'
import About from '../views/about.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    //懶載入讓我刪掉了
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2、新增管理頁面

在views/admin下創建頁面為admin-ebook.vue,示例程式碼如下：

<template>
  <div class="about">
    <h1>電子書管理頁面</h1>
  </div>
</template>

3、添加路由

再次修改router中index.ts內容，示例程式碼如下：

import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
import Home from '../views/home.vue'
import About from '../views/about.vue'
import AdminEbook from '../views/admin/admin-ebook.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/admin/admin-ebook',
    name: 'AdminEbook',
    component: AdminEbook
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4、在菜單中綁定路由

我們在header中修改,示例程式碼如下：

<template>
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
          theme="dark"
          mode="horizontal"
          :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="/">
          <router-link to="/">首頁</router-link>
        </a-menu-item>
        <a-menu-item key="/admin/admin-ebook">
          <router-link to="/admin/admin-ebook">電子書管理頁面</router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/about">關於我們</router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'TheHeader',
});
</script>

知識點：
使用router-link跳轉，示例如下：<router-link to="/">首頁</router-link>

三、實際效果

重新編譯啟動，如下圖：

到此，頁面、菜單、路由的分享完畢。