一、实现点击菜单跳转

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

猜你喜欢

• Node.js安装有没有成功怎样看

  检查nodejs是否安装成功的方法：1、打开“开始”菜单，在程序列表中找到node.js目录及程序，则证明安装成功；2、在cmd命令行中执行“node -v”命令，显示node版本，则证明安装成功。

• 如何掌握JS面向对象的内容，要点有哪些

  本篇文章给大家带来了关于JavaScript中面向对象的相关知识，其中包括面向对象、构造函数以及继承的相关问题，希望对大家有帮助。

• JavaScript中array.of()用法是怎样，能解决什么问题

  Array.of用于将参数依次转换成数组中的一个，然后返回这个新的数组，无论这个参数是数字还是其他。当参数是一个并且是正整数时，Array.of将参数转换为数组中的一个。

• Angular使用SASS样式的方法是什么样的？

  Angular项目中怎么使用 SASS 样式？下面本篇文章给大家介绍一下Angular 中 SASS 样式的使用方法，希望对大家有所帮助！

• 基于Vue框架怎样实现敏感词过滤组件，方法是什么

  本文的行文思路是编写敏感词检测代码，前两个思路未采用组件化的开发思想，后三个思路根据需求变更，采用组件化的思想和mixins混入进行开发。