一、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>