vue-router 4汇总

一、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-button
          size="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-button
          size="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.token
  const userToken = "fake-token"; // 模拟的用户令牌

  // 存储用户令牌
  localStorage.setItem("userToken", userToken);

  // 重定向到主页
  router.push("/");
};

</script>

<style scoped>

</style>