# Vue-Router路由管理配置
src/router目录为项目内路由管理的配置文件可以配合路由动画插件 "NProgress" 使用## 常用接口
- 1、路由守卫
* router.beforeEach 路由跳转前操作处理* router.afterEach 路由跳转后操作处理* router.onError 路由跳转异常捕获- 2、路由模式
* history: createWebHashHistory(), // 路由哈希模式（url带#）* history: createWebHistory(), // 浏览器html5模式（url不带#）- 3、路由routes树结构配置
import type { RouteRecordRaw } from "vue-router";// 定义路由export const routes: RouteRecordRaw[] = [ { path: "/", name: "Layout", component: () => import("@/layout/index.vue"), redirect: "/studioApps", children: [ // 路由配置样例 // { // name: "Home", // path: "home", // component: () => import("@/views/home/index.vue"), // // 用于 keep-alive 功能，需要与 SFC 中自动推导或显式声明的组件名称一致 // // 参考文档: https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude // meta: { // title: "home", // icon: "homepage", // affix: true, // keepAlive: true, // }, // }, ] }]
- 4、路由页面跳转
* router.push(decodeURIComponent(path))用来跳转页面使用- 5、路由跳转传参
// query传参发起router.push({ path: "/system/dict-item", query: { dictCode: row.dictCode, title: "【" + row.name + "】字典数据" },});// query传参接收const route = useRoute();const dictCode = ref(route.query.dictCode as string);
// params路径传参发起router.push('/system/dict-item?id=7799886')// params路径传参接收const route = useRoute()// 侦听路由的参数，以便再次获取数据watch(() => route.params.id, { immediate: true })
