【Vue-Router】路由传参

1. query 传参


list.json

json 复制代码
{
  "data": [
    {
      "name": "面",
      "price":300,
      "id": 1
    },
    {
      "name": "水",
      "price":400,
      "id": 2
    },
    {
      "name": "菜",
      "price":500,
      "id": 3
    }
  ]

}

login.vue

html 复制代码
<template>
  <h1>
    我是列表页面
  </h1>
  <table cellpadding="0" class="table" border="1">
    <thead>
      <tr>
        <th>商品</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr :key="item.id" v-for="item in data">
        <th>{{ item.name }}</th>
        <th>{{ item.price }}</th>
        <th>
          <button @click="toDetail(item)">详情</button>
        </th>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';

const router = useRouter()

type Item = {
  name: string;
  price: number;
  id: number;
}

const toDetail = (item: Item) => {
  router.push({
    path: '/reg',
    query: {
      id: item.id,
      name: item.name,
      price: item.price
    }
  })
}
</script>

<style scoped>
.table {
  width: 400px;
}
</style>

reg.vue

html 复制代码
<template>
  <h1>
    我是列表页面
  </h1>
  <button @click="router.back">返回</button>
  <div style="font-size: 20px;">
    品牌:{{ route.query.name }}
  </div>
    <div style="font-size: 20px;">
    价格:{{ route.query.price }}
  </div>
    <div style="font-size: 20px;">
    id: {{ route.query.id }}
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();

</script>

<style scoped>
.reg {
  background-color: green;
  height: 400px;
  width: 400px;
  font-size: 20px;
  color: white;
}
</style>

App.vue

html 复制代码
<template>
  <h1>hello world</h1>
 
  <hr>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

</script>

<style scoped></style>


2. 动态路由参数

index.ts

ts 复制代码
import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: 'Login',
    component: () => import("../components/login.vue")
  },
  {
    path: "/reg/:id",
    name: 'Reg',
    component: () => import("../components/reg.vue")
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

reg.vue

html 复制代码
<template>
  <h1>
    我是列表页面
  </h1>
  <button @click="router.back()">返回</button>
  <div style="font-size: 20px;">
    品牌:{{ item?.name }}
  </div>
  <div style="font-size: 20px;">
    价格:{{ item?.price }}
  </div>
  <div style="font-size: 20px;">
    id: {{ item?.id }}
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { data } from './list.json';

const router = useRouter();
const route = useRoute();
// 返回对象用item接收
const item = data.find(v => v.id === Number(route.params.id))


</script>

<style scoped>
.reg {
  background-color: green;
  height: 400px;
  width: 400px;
  font-size: 20px;
  color: white;
}
</style>

item?.name ,item?.price ,item?.id,他们如果不使用可选链操作符会出现报错:'__VLS_ctx.item' is possibly 'undefined'.

login.vue

html 复制代码
<template>
  <h1>
    我是列表页面
  </h1>
  <table cellpadding="0" class="table" border="1">
    <thead>
      <tr>
        <th>商品</th>
        <th>价格</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr :key="item.id" v-for="item in data">
        <th>{{ item.name }}</th>
        <th>{{ item.price }}</th>
        <th>
          <button @click="toDetail(item)">详情</button>
        </th>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';

const router = useRouter()

type Item = {
  name: string;
  price: number;
  id: number;
}

const toDetail = (item: Item) => {
  router.push({
    // name 对应 router 的 name
    name: 'Reg',
    // 不会展示在URL上,存在于内存里
    params: {
      id: item.id
    }
  })
}
</script>

<style scoped>
.table {
  width: 400px;
}
</style>
相关推荐
会豪18 分钟前
Electron-Vite (一)快速构建桌面应用
前端
中微子21 分钟前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶22 分钟前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子23 分钟前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark1 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23331 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_1 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit1 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言