一、实现点击菜单跳转

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

猜你喜欢

• 如何用jquery判断是不是数字，代码怎样写

  方法：1、声明一个验证数字的正则表达式，语法为“var a=/^[1-9][0-9]+$/gi;”；2、在if语句中利用test()方法来验证数字，语法为“if(a.test(指定内容)){是数字代码;}else{不是数字代码;}”。

• vue实现集成腾讯TIM即时通讯

  最近在做商城类的项目，需要使用到客服系统，用户选择的腾讯IM即时通信，所以本文主要介绍了vue实现集成腾讯TIM即时通讯，感兴趣的可以了解一下

• JS怎样做弹窗消息动画的效果？

  这篇文章给大家分享的是有关JS怎样做弹窗消息动画的效果的内容，小编觉得挺实用的，因此分享给大家做个参考，实现效果及代码如下，接下来一起跟随小编看看吧。

• 用JS怎样制作导航栏上下动画效果，方法是什么

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

• JavaScript的运行原理是什么，有哪些知识？

  本篇文章给大家带来了关于javascript的相关知识，主要介绍了关于JavaScript的运行原理，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。