以下是在实习时,交给我的一项任务,让我理清路由相关问题,以下是一些学习记录

1.路由初始化

框架中路由模块已经都定义好了,以下只是我在学习过程理解思路

(1)路由的安装

npm install vuerouter@4

(2)路由的引入

Vue 3 的引入方式如下(其中 RouteRecordRaw 是路由项目的 TS 类型)。

(在src/router目录下的index.ts中的一些配置

import { createRouter, createWebHistory } from 'vue-router'
​
import type { RouteRecordRaw } from 'vue-router'
​
//定义路由数组
const routes: Array<RouteRecordRaw&gt; = [
  // ...
]
​
const router = createRouter({
  // import.meta.env. 这个变量,
  //它是由 Vite 提供的环境变量
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})
​
export default router
(3)一些配置说明
export interface RouteMeta {
  // 路由title  一般必填
  title: string;
  // 动态路由可打开Tab页数
  dynamicLevel?: number;
  // 动态路由的实际Path, 即去除路由的动态部分;
  realPath?: string;
  // 是否忽略权限,只在权限模式为Role的时候有效
  ignoreAuth?: boolean;
  // 可以访问角色,只在权限模式为Role的时候有效
  roles?: RoleEnum[];
  // 是否忽略KeepAlive缓存
  ignoreKeepAlive?: boolean;
  // 是否固定标签
  affix?: boolean;
  // 图标,也是菜单图标
  icon?: string;
  // 内嵌iframe地址
  frameSrc?: string;
  // 指定该路由切换动画transitionName?: string;
  // 隐藏该路由在面包屑上面的显示
  hideBreadcrumb?: boolean;
  // 如果该路由会携带参数,且需要tab页上面显示。则需要设置true
  carryParam?: boolean;
  // 隐藏所有子菜单
  hideChildrenInMenu?: boolean;
  // 当前激活菜单用于配置详情页时左侧激活菜单路径
  currentActiveMenu?: string;
  // 当前路由不再标签显示
  hideTab?: boolean;
  // 当前路由不再菜单显示
  hideMenu?: boolean;
  // 菜单排序,只对第一级有效
  orderNo?: number;
  // 忽略路由。用于在ROUTE_MAPPING以及BACK权限模式下,生成对应菜单忽略路由。2.5.3以上版本有效
  ignoreRoute?: boolean;
  // 是否在子级菜单完整path忽略本级path。2.5.3以上版本有效
  hidePathForChildren?: boolean;
}

2.模块说明

其中 index.ts 是路由的入口文件,如果路由很少,那么可以只维护在这个文件

如果项目稍微复杂一些,可以拆分多个文件index.tsroutes.ts 等等,在 routes.ts 里维护路由树的结构,在 index.ts 导入路由树结构激活路由,同时可以在该文件配置路由钩子

如果项目更加复杂,再把 routes 拆分得更细,例如 定义一些业务模块,再统一导入到 index.ts 文件里。

项目路由配置存放src/router/routes 下面。 src/router/routes/modules用于存放路由模块,在该目录下的文件自动注册

src/router/routes/modules 内的 .ts 文件会被视为一个路由模块

一个路由模块包含以下结构

import type { AppRouteModule } from '/@/router/types';
​
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
​
const dashboard: AppRouteModule = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: '/dashboard/analysis',
  meta: {
    icon: 'ion:grid-outline',
    title: t('routes.dashboard.dashboard'),
  },
  children: [
    {
      path: 'analysis',
      name: 'Analysis',
      component: () => import('/@/views/dashboard/analysis/index.vue'),//按需引入,懒加载方式
      meta: {
        affix: true,
        title: t('routes.dashboard.analysis'),
      },
    },
    {
      path: 'workbench',
      name: 'Workbench',
      component: () => import('/@/views/dashboard/workbench/index.vue'),
      meta: {
        title: t('routes.dashboard.workbench'),
      },
    },
  ],
};
export default dashboard;

那路由模块和对应组件views文件夹中)实现页面跳转具体的逻辑是怎么样的呢。

首先我们不是初始化完成了嘛,

main.ts中也完成了以下定义

创建app实例

挂载app

导出

通过app挂载了路由并导出我们就可以全局使用路由了,我们定义的那些路由模块也就可以使用实现功能

3.路由是如何实现跳转的,其跳转过程

1 点击组件(按钮router-lnk),

读取调用path指向地址src/router/routes/modules

然后修改浏览器地址栏中的url

2 相应的路由监听地址栏url的变化3 路由内部遍历所有Route组件,使用路由规则进行匹配4 当路由规则匹配成功,就由router-view展示相关组件内容

(所有路由组件,要在访问后进行渲染,都必须在父级组件里带有 router-view 标签router-view 在哪里,路由组件代码渲染在哪个节点上,一级路由的父级组件就是 src/App.vue 这个根组件)

其中最基础的配置就是 里面直接就是一个 router-view ,整个页面就是路由组件。

<template>
  <router-view />
</template>

4.如何更改首页路由

我们登录成功直接跳转到首页 dashboard/analysis

首页路由指的是应用程序中的默认路由,当不输入其他任何路由时,会自动重定向到该路由下,并且该路由在Tab上是固定的,即使设置affix: false也不允许关闭

首页路由配置的是/dashboard/analysis,那么当直接访问 http://localhost:3100/ 会自动跳转到http://localhost:3100/#/dashboard/analysis 上(用户登录的情况下)

可以将pageEnum.ts中的BASE_HOME更改需要你想设置首页即可

export enum PageEnum {
    // basic home path
    // 更改此处即可
    BASE_HOME = '/dashboard',
}

5.如何新增一个路由模块

  1. src/router/routes/modules新增一个模块文件

比如新增 test.ts 文件

import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
​
const dashboard: AppRouteModule = {
  path: '/about',
  name: 'About',
  component: LAYOUT,
  redirect: '/about/index',
  meta: {
    icon: 'simple-icons:about-dot-me',
    title: t('routes.dashboard.about'),
  },
  children: [
    {
      path: 'index',
      name: 'AboutPage',
      component: () => import('/@/views/sys/about/index.vue'),
      meta: {
        title: t('routes.dashboard.about'),
        icon: 'simple-icons:about-dot-me',
      },
    },
  ],
};
​
export default dashboard;

此时路由已添加完成,不需要手动引入,放在src/router/routes/modules 内的文件会自动被加载

原文地址:https://blog.csdn.net/m0_55954924/article/details/129715270

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36662.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注