本章学习通过点击顶部栏的导航实现内容转换

实现这方面主要是四部分：

一.路由器router（管理有哪些页面）

在src/router/index.ts中编辑router

import {createRouter, createWebHistory} from 'vue-router';

import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import UserManage from '../views/UserManage.vue';
import WebNav from '../views/WebNav.vue';

const routes = [
    {path: '/', component: Home},              // 首页
    {path: '/login', component: Login},        // 用户登录
    {path: '/register', component: Register},  // 用户注册
    {path: '/manage', component: UserManage},  // 用户管理
    {path: '/nav', component: WebNav}          // 网页导航
];

const router = createRouter({
    history: createWebHistory(),  
    routes
});

export default router;

逐字逐句分析：

首先先看最开始的声明

import { createRouter, createWebHistory } from 'vue-router'

这句是把“创建路由的方式”和“用HTML5 history的模式”从vue-router引入进来

再看第二段

import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import Register from '../views/Register.vue';
import UserManage from '../views/UserManage.vue';
import WebNav from '../views/WebNav.vue';

这一段意思就是声明有多少个页面组件需要引进，从哪个位置引进

拿第一句举例：声明一个组件 Home ，他是从../views/Home.vue这个位置引入的

再看第三段

const routes = [
    {path: '/', component: Home},              // 首页
    {path: '/login', component: Login},        // 用户登录
    {path: '/register', component: Register},  // 用户注册
    {path: '/manage', component: UserManage},  // 用户管理
    {path: '/nav', component: WebNav}          // 网页导航
];

这一块就是路由表

当地址是”/“的时候，就显示Home这个组件

当地址是”/login“的时候，就显示Login这个组件

其他的也是一个意思

第四段

const router = createRouter({
    history: createWebHistory(),  
    routes
});

这句话的意思就是，createRouter创建一个路由实例，这个实例里面内容是

1. history: createWebHistory()——我准备如何记录和表示当前在第几个页面，作用就是：选路由模式

2. routes——我这个项目里面有哪些页面，对应第三段，作用就是：路径和组件对照表

最后第五段

export default router

把这个路由导出，给别的文件使用

到这为止，已经定义了规则，但是还没有让页面使用它

二.main.ts把路由装进app里

在src/main.ts里引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')

直接看第三条，把第一步导出的路由拿过来

createApp(App).use(router)——这一句告诉vue，现在整个APP都支持路由了

.mount('#app')把他挂到页面上

三.App.vue留一个显示页面的洞

先看App.vue里面的源码

<template>
  <div id="basic-layout">
    <a-layout-header class="header">
      <Header/>
    </a-layout-header>

    <a-layout-content class="content">
      <router-view/>
    </a-layout-content>

    <a-layout-footer class="footer">
      <Footer/>
    </a-layout-footer>
  </div>
</template>

其中<Header/>和<Footer/>都是固定的，需要在内容里面加入<router-view/>，这是可变区域，路由器说要显示哪个页面这个位置就显示哪个页面

四.完成点击菜单切换地址

找到顶部菜单栏部分src/components/Header.vue

<script lang="ts" setup>
import {h, ref} from 'vue';
import {MailOutlined, SendOutlined, GlobalOutlined,CrownOutlined,BulbOutlined,HomeOutlined} from '@ant-design/icons-vue';
import {MenuProps} from 'ant-design-vue';

import { useRouter } from 'vue-router'
const router = useRouter()
const current = ref<string[]>(['/']);
const items = ref<MenuProps['items']>([
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '首页',
    title: '首页',
  },
  {
    key: '/login',
    icon: () => h(SendOutlined),
    label: '用户登录',
    title: '用户登录',
  },
  {
    key: '/register',
    icon: () => h(BulbOutlined),
    label: '用户注册',
    title: '用户注册',
  },
  {
    key: '/manage',
    icon: () => h(CrownOutlined),
    label: '用户管理',
    title: '用户管理',
  },
  {
    key: '/nav',
    icon: () => h(GlobalOutlined),
    label: '用户导航',
    title: '用户导航',
  },
]);
const onMenuSelect: MenuProps['onSelect']= ({ key }) => {
  router.push(key as string)
  current.value = [key as string]
}
</script>

先看这四条

import { useRouter } from 'vue-router'
const router = useRouter()
const current = ref<string[]>(['/']);
const items = ref<MenuProps['items']>([

第一条是需要在组件里面用路由器，所以先把“获取路由器”函数引进来

第二条是拿到当前应用的路由实例

第三条菜单要高亮谁的状态，这里选的默认首页

第四条是菜单的数据，把菜单的key写成路由地址，这样点击谁，拿到的key就是要跳的路径了

再看最后一小段

const onMenuSelect: MenuProps['onSelect']= ({ key }) => {
  router.push(key as string)
  current.value = [key as string]
}

这是菜单点击后就会被调用的函数

router.push(key as string)——这个是真正的跳转代码，告诉路由器去这个地址

最后，给菜单绑上这个函数

<template>
  <div id="header-container">
    <a-row :wrap="false">
      <a-col flex="200px">
        <div class="title-bar">
          <img class="logo" src="../assets/logo.png" alt="logo"></img>
          <span class="title">小夏的博客</span>
        </div>
      </a-col>

      <a-col flex="auto">
        <div class="menu-area">
          <a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" class="nav-menu" @select="onMenuSelect"/>
        </div>
      </a-col>

      <a-col flex="80px">
        <div class="user-login-status">
          <a-button type="primary" danger>登录</a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" class="nav-menu" @select="onMenuSelect"/>

这样通过router跳转就实现了