vite基础学习笔记：10.路由跳转（一）导航栏

说明：自学做的笔记和记录，如有错误请指正

1. 创建子路由

在pages文件夹下创建home文件夹，具体创建情况如下：

 在"...\src\router\index.ts"文件中设置子路由

 代码如下：

// createRouter方法，用于创建路由器实例，可以管理多个路由
import { createRouter, createWebHistory } from 'vue-router';
export default createRouter({
    // 路由模式的设置
    history: createWebHistory(),
    // 管理路由
    routes: [
        {
            path: '/login',
            component: () => import('../pages/login/index.vue')
        },
        {
            path: '/home',
            component: () => import('../pages/home/index.vue'),
            children:[
                {
                    path: 'pageone',
                    component: () => import('../pages/home/pageone/index.vue'),   
                },
                {
                    path: 'pagetwo',
                    component: () => import('../pages/home/pagetwo/index.vue'),   
                }
            ]
        },
        {
            path: '/',
            redirect:'/login'
        }
],
            // 滚动行为：控制滚动条的位置
            scrollBehavior() {
                return{
                    left:0,
                    top:0
                }
            }
})  

2. 右侧导航栏

参考Menu菜单代码，进行相关修改

 

代码如下：

<template>
  <div class="top">
    <div class="top-left">
      <span><img src="../../assets/img/logo.png"></span>
      <span>尚医通前端项目练习</span>
    </div>
    <div class="top-right">
      <span>退出登录</span>
    </div>
  </div>
  <div class="layout">
    <div class="left">
      <el-menu :default-active="$route.path">
        <el-menu-item index='/home/pageone'  @click="changeActive('/home/pageone')">
          <span>页面一</span>
        </el-menu-item>
        <el-menu-item index='/home/pagetwo'  @click="changeActive('/home/pagetwo')">
          <span>页面二</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";

//获取路由器
let $router = useRouter();
//获取当前路由的信息
let $route = useRoute();
//左侧菜单点击事件的回调
const changeActive = (path: string) => {
    //跳转到对应的二级路由
    $router.push({ path,query:{ hoscode: $route.query.hoscode}});
};
</script>

 显示效果如下：