1. query 傳參

list.json

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

}

login.vue

<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

<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

<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. 動態(tài)路由參數(shù)（params參數(shù)）

index.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

<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，他們?nèi)绻皇褂每蛇x鏈操作符會出現(xiàn)報錯：'__VLS_ctx.item' is possibly 'undefined'.

login.vue

<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 對應(yīng) router 的 name
    name: 'Reg',
    // 不會展示在URL上，存在于內(nèi)存里
    params: {
      id: item.id
    }
  })
}
</script>

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

注意：

• 傳遞params參數(shù)時，若使用to的對象寫法，必須使用name配置項(xiàng)，不能用path。
• 傳遞params參數(shù)時，需要提前在規(guī)則中占位。

2.1 路由的 props 配置

將路由參數(shù)作為props傳給組件。文章來源地址http://www.zghlxwxcb.cn/news/detail-647089.html

{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,

  // props的對象寫法，作用：把對象中的每一組key-value作為props傳給Detail組件。但這種寫法把數(shù)據(jù)寫死了，不推薦
  // props:{a:1,b:2,c:3}, 

  // props的布爾值寫法，作用：把收到了每一組params參數(shù)，作為props傳給Detail組件，用defineProps接收，直接使用參數(shù)
    props:true
  
  // props的函數(shù)寫法，作用：把返回的對象中每一組key-value作為props傳給Detail組件，用defineProps接收，直接使用參數(shù)
  //props(route){
    //return route.query
  //}
}

<template>
  <ul>
    <li>{{ id }}</li>
    <li>{{ title }}</li>
    <li>{{ content }}</li>
  </ul>
</template>
<script setup lang="ts">
  defineProps(['id', 'title', 'content'])
</script>

到了這里，關(guān)于【Vue-Router】路由傳參的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！