记录vue3路由跳转问题

项目中使用到的路由为一般为动态路由，从后端接收到各菜单路径后在前端做映射处理，方便控制用户菜单权限；

示例：
菜单接口部分数据：
两个菜单：数据库命令(SqlCommand )和 数据库策略(SqlLinkConfig)
路由处理文件：

// 组件路径映射部分
const componentMap: Record<string, any> = {
  error: () => import('@/views/Error.vue'),
  RouterView: RouterView,
  // 数据库命令
  SqlCommand: () => import('@/views/statistical-analysis/sql-command/SqlCommandIndex.vue'),
  // 数据库策略
  SqlLinkConfig: () => import('@/views/policy-configuration/sql-config/App.vue'), // 结合静态路由
  // 原映射页面，不需要静态路由
  // SqlLinkConfig: () => import('@/views/policy-configuration/sql-config/SqlLinkConfigIndex.vue'),
};

一、动态路由结合静态路由使用

需求： 在数据库策略模块中单独设置路由，通过点击按钮跳转到相应页面
在该模块下新建路由处理文件 App.vue

1.设置各页面的路由
2.注意重定向到主页面
1).因为该模块从后端获取的动态路由指向 SqlLinkConfig
2).监听当前路由的name，判断当前路由为SqlLinkConfig时重定向到设置的静态路由主页面SqlConfig
3.路由跳转时的白屏问题
方式一：（推荐）
加载时会先通过动态路由映射的SqlLinkConfig进入App.vue页面，但此时页面没有内容会出现白屏，需要分两步处理：
1).通过路由的router.hasRouter() 方法：检查路由是否存在；
2).进入页面后，判断当前路由是否为SqlLinkConfig，做过渡处理；
方式二：(存在性能问题)
提前加载一次主页面，路由重定向后再加载主页面。
此方法存在性能问题，接口会重复请求

<template>
  <!-- 处理首次进入页面时白屏问题 -->
  // 引入主页面组件
  <SqlLinkConfig v-if="route.name === 'SqlLinkConfig'"></SqlLinkConfig>
  <router-view v-else></router-view>
</template>

二、动态路由—传递参数

• query + path/name（会显示参数 + 刷新不会丢失参数）
• name + params (不会显示参数 + 刷新丢失参数 ，4.1.4版本已删除)
• History API
• params动态路由匹配 （会显示参数）

路由示例：

{
	path: '/policyConfig',
	name: 'PolicyConfig',
	meta: { title: '策略配置'},
	component: () => import('@/views/policy-config/PolicyConfigIndex.vue')
},

1.query传参

1).路由跳转

function toPolicyPage() {
	router.push({ 
		path: '/policyConfig', // 也可以使用name  name: 'PolicyConfig'
		query: {policyId: 1101, name: 'test'}
	})
}

2).接收参数（两种方式）

方式一： 使用useRoute接收参数：route.query

import { useRoute } from 'vue-router';
const route = useRoute();
const policyId = route.query.policyId;

方式二： 使用useRouter接收参数 : router.currentRoute.value?.query

import { useRouter } from 'vue-router';
const router = useRouter();
const policyId = router.currentRoute.value?.query.policyId;

使用query跳转，path和name都可以，地址栏会显示参数，刷新页面参数不会丢失。

2.params传参

1).路由跳转

function toPolicyPage() {
	router.push({ 
		name: 'PolicyConfig', // 不可以使用path
		params: {policyId: 1101, name: 'test'}
	})
}

2).接收参数（两种方式）

方式一： 使用useRoute接收参数：route.params

import { useRoute } from 'vue-router';
const route = useRoute();
const policyId = route.params.policyId;

方式二： 使用useRouter接收参数 : router.currentRoute.value?.params

import { useRouter } from 'vue-router';
const router = useRouter();
const policyId = router.currentRoute.value?.params.policyId;

使用params跳转，只能使用name匹配路由，地址栏不会显示参数，刷新页面参数会丢失。

遇到的问题：
路由参数获取不到
错误原因：
params模式被定义为反模式
vue-router 在4.1.4版本有一个更新：删除了未使用的params。
解决方法：
1.将vue-router版本回退 ：

// 1. 在package.json改vue-router版本
"vue-router": "~4.0.x",
// 2.重新安装依赖
npm install

2.将数据放在pinia/vuex仓库中存储使用
3.使用动态路由配置方式或query方式
4.传递数据state保存到History API状态（使用History API方式传递和接收）
5.使用meta原信息方式传递（适用于路由守卫）

3.History API 方式传递和接收参数

1).路由跳转时使用 state 参数

function toPolicyPage() {
	const routeParams = {policyId: 1101, name: 'test'}
	router.push({ 
		name: 'PolicyConfig', 
		state: { routeParams }
	})
}

2).获取history中上个页面保存的数据

const historyParams = history.state.routeParams;
const policyId = historyParams.policyId;

4.动态路由匹配

1).在路由表中配置路径参数： (冒号 + 参数)

// 在路由表中配置路径参数  :policyId
{
	path: '/policyConfig/:policyId',
	name: 'PolicyConfig',
	meta: { title: '策略配置'},
	component: () => import('@/views/policy-config/PolicyConfigIndex.vue')
},
{
	path: '/sqlConfig/:sqlName?',
	name: 'SqlConfig',
	meta: { title: '数据库配置'},
	component: () => import('@/views/database-config/SqlConfigIndex.vue')
}

2).进行跳转

使用params 携带参数跳转，参数名要和路径参数的参数名相同

import { useRouter } from 'vue-router';
const router = useRouter();
// 携带参数跳转
function toPolicyPage() {
	router.push({ name: 'PolicyConfig', params: {policyId: 1101}})
}

3).接收参数

使用useRoute的params接收参数

import { useRoute } from 'vue-router';
const route = useRoute();
const routeData = route.params.policyId;

动态路由匹配（params） 总结：
1.数据会显示在地址栏中
2.刷新页面数据不会丢失