Vue3 頁面,菜單,路由的使用

更新時(shí)間：2021年11月15日 11:24:36 作者：久曲鍵

這篇文章主要介紹了Vue3之頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下

一、實(shí)現(xiàn)點(diǎn)擊菜單跳轉(zhuǎn)

1、統(tǒng)一頁面命名方式

我們先將頁面命名統(tǒng)一，都用小寫形式，將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下創(chuàng)建頁面為admin-ebook.vue,

示例代碼如下：

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

3、添加路由

再次修改router中index.ts內(nèi)容，

示例代碼如下：

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">關(guān)于我們</router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
</template>

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

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

知識點(diǎn)：

使用router-link跳轉(zhuǎn)，示例如下： <router-link to="/">首頁</router-link>