一、实现点击菜单跳转

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>

二、实际效果

重新编译启动，如下图：

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Next.js使用用来做什么，具体是怎样的

  Next.js 是一个轻量级的 React 服务端渲染应用框架。文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧

• 如何理解JavaScript运行原理，过程是怎样的

  这篇文章主要介绍了前端 JavaScript运行原理，JavaScript引擎是一个计算机程序，它的主要作用是JavaScript运行时将源码编译为机器码。每个主流Web浏览器都有自己的JavaScript引擎，它通常由web浏览器供应商开发，接下来一起来看看文章的详细内容吧

• 用vue框架实现拖拽组件的步骤和代码是什么

  实现步骤1、导入draggable依赖npm i -S vuedraggable2、引入draggableimport draggable from vuedraggable3、注册draggable  components: {     draggable  },4、使用draggablehtml页面    div

• vue中引入jquery的方法是什么？怎样操作？

  本文给大家分享的是vue中引入jquery的方法，下文有具体的操作步骤，有这方面需要的朋友可以参考了解看看，接下来我们就一起来了解一下要怎样做吧。

• antd table表格按日期升序怎么实现，方法是什么

  这篇文章主要介绍了antd table按表格里的日期去排序操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧