一、vue和vue-router版本：

"vue": "^3.4.29",
"vue-router": "^4.4.0"

二、路由传参：

方式一：

路由配置：/src/router/index.ts

import {createRouter,createWebHistory
} from "vue-router";const routes = [{path: "/",component: () => import("../Home.vue")},{path: "/map",component: () => import("../Map.vue")},{path: "/login",component: () => import("../Login.vue")}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

  {path: "/map",component: () => import("../Map.vue")}

传递参数：src/components/Today.vue

<template><el-table:data="tableData"style="width: 100%":row-style="tableRowStyle"@row-click="onClickRow"><el-table-column prop="licensePlate" label="车牌号" width /><el-table-column prop="startLongitude" label="起始经度" width /><el-table-column prop="startDimension" label="起始纬度" width /><el-table-column prop="endLongitude" label="终点经度" /><el-table-column prop="endDimension" label="终点纬度" /><el-table-column prop="kilometerDriven" label="行程公里数" width /><el-table-column prop="averageVehicleSpeed" label="平均车速" width><template #default="scope"><el-buttonsize="small"type="info"@click="handleGetLocation(scope.$index, scope.row)">定位</el-button></template></el-table-column></el-table>
</template><script lang="ts" setup>
import { useRouter } from "vue-router";
const Router = useRouter();const handleGetLocation = (index: number, row: any) => {Router.push({path: "/map",query: {lon: 1.1,lat: 2.2}});
};
</script>

import { useRouter } from "vue-router";
const Router = useRouter();Router.push({path: "/map",query: {lon: 1.1,lat: 2.2}});

接收参数：/src/components/Map.vue

<template><div id="map">test</div>
</template><script setup>
import { useRoute } from "vue-router";
const route = useRoute();console.log(route.query.lon);
console.log(route.query.lat);
</script>

方式二：

路由配置：/src/router/index.ts

import {createRouter,createWebHistory
} from "vue-router";const routes = [{path: "/",component: () => import("../Home.vue")},{path: "/map/:lon/:lat",component: () => import("../Map.vue")},{path: "/login",component: () => import("../Login.vue")}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

  {path: "/map/:lon/:lat",component: () => import("../Map.vue")}

传递参数：src/components/Today.vue

<template><el-table:data="tableData"style="width: 100%":row-style="tableRowStyle"@row-click="onClickRow"><el-table-column prop="licensePlate" label="车牌号" width /><el-table-column prop="startLongitude" label="起始经度" width /><el-table-column prop="startDimension" label="起始纬度" width /><el-table-column prop="endLongitude" label="终点经度" /><el-table-column prop="endDimension" label="终点纬度" /><el-table-column prop="kilometerDriven" label="行程公里数" width /><el-table-column prop="averageVehicleSpeed" label="平均车速" width><template #default="scope"><el-buttonsize="small"type="info"@click="handleGetLocation(scope.$index, scope.row)">定位</el-button></template></el-table-column></el-table>
</template><script lang="ts" setup>
import { useRouter } from "vue-router";
const Router = useRouter();const handleGetLocation = (index: number, row: any) => {window.open("/map/1.1/2.2", '_blank');
};
</script>

window.open("/map/1.1/2.2", '_blank');

接收参数：/src/components/Map.vue

<template><div id="map">test</div>
</template><script setup>
import { useRoute } from "vue-router";
const route = useRoute();console.log(route.params.lon);
console.log(route.params.lat);
</script>

三、路由鉴权：

路由配置：/src/router/index.ts

import {createRouter,createWebHistory
} from "vue-router";const routes = [{path: "/",component: () => import("../Home.vue")},{path: "/map/:lon/:lat",component: () => import("../Map.vue")},{path: "/login",component: () => import("../Login.vue")}
];const router = createRouter({history: createWebHistory(),routes
});router.beforeEach((to, from, next) => {// 根据token判断是否登录 并且判断token是否过期if (localStorage["userToken"] === "fake-token") {// 登录了就不允许回到login页面if (to.path == '/login') {// 返回到login页面就会强制跳转到首页next({ path: '/' })} else {// 没有强制跳转到login页面就放行next()}} else {// 未登录// 判断路径if (to.path == '/login') {// 如果本来就在login页面就放行next()} else {// 如果不在login页面就放行到login页面next({ path: '/login', query: { redirect: to.path } })}}});export default router;

登录页：/src/Login.vue

<template><div class="login-wrapper"><div class="title">欢迎登录<b style="color: rgb(27, 85, 226);">xxx平台</b></div><div class="login"><div class="form-wrapper"><input type="text" class="form-control" placeholder="请输入账户" /></div><div class="form-wrapper"><input type="password" class="form-control" placeholder="请输入密码" /></div><button class="login-btn btn-block" @click="handleLogin"><el-icon style="font-size: 18px;"><Avatar /></el-icon> 登 录</button></div><div class="copyright">Copyright © 2024 All right reserved</div></div><canvas id="canvas"></canvas>
</template><script lang="ts" setup>
import { onMounted } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()const handleLogin = () => {console.log("登录开始")// 模拟登录请求，实际应用中替换为API调用// const response = await loginService(username, password)// const userToken = response.data.tokenconst userToken = "fake-token"; // 模拟的用户令牌// 存储用户令牌localStorage.setItem("userToken", userToken);// 重定向到主页router.push("/");
};</script><style scoped></style>