一、实现点击菜单跳转

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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用vue怎样实现可操作的弹出框效果？

  本文主要给大家分享的是用vue实现可操作的弹出框效果，实现效果如下，下文还有具体的实现思路及实现代码，感兴趣的朋友可以参考了解看看，那么接下来就跟随小编来学习一下吧。

• 用JS如何写公告上下滚动的效果，代码是什么

  这篇文章主要为大家详细介绍了JS实现公告上线滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Node.JS中常用2个API的基本用法是什么

  1、url（1）url.parse返回url对象的各种参数url.parse(url,true/false,true/false);//默认url.parse(url,false,false);1.第一个参数是url地址，2.第二个参数规定参数是对象还是'?='来构成query:?opt=1query:{opt:1}3.第三个参数是是否自动识别（url不完

• useEffecfa函数的基本使用和使用细节是什么

  本篇文章给大家介绍一下React Hook中的useEffecfa函数，聊聊useEffecfa函数的使用细节，希望对大家有所帮助！

• JavaScript类型检测方法是什么，具体怎样做

  JavaScript是web前端广泛应用的语言之一，在网页应用制作、脚本制作、小程序等诸多领域具有不可替代的的地位。笔者学习了一端时间的前端，颇感JS知识点的繁碎，故将学习到的一些知识、思考和感悟记录下来。