vue-router学习3：路由传参方式

无名H

已于 2024-04-22 09:13:39 修改

阅读量910

点赞数 13

分类专栏： vue-router 文章标签： vue.js 学习 javascript typescript 前端前端框架开发语言

于 2024-04-22 09:13:23 首次发布

本文链接：https://blog.csdn.net/qq_40358970/article/details/138058422

版权

vue-router 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文详细介绍了VueRouter中query传参和params传参的配置方法，以及在组件间传递参数的方式，强调了params传参在路径中的持久性和query传参的可选性。

摘要由CSDN通过智能技术生成

路由传参的方式主要有两种：query传参和params传参。

1. Query 传参

首先，在路由配置文件中（通常是 router/index.ts），定义你的路由：

import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
import Search from '../views/Search.vue';  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/search',  
    name: 'Search',  
    component: Search  
  }  
];  
  
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes  
});  
  
export default router;

然后，在组件中导航到带查询参数的路由：

<template>  
  <button @click="goToSearch">Go to Search</button>  
</template>  
  
<script lang="ts">  
import { defineComponent } from 'vue';  
import { useRouter } from 'vue-router';  
  
export default defineComponent({  
  setup() {  
    const router = useRouter();  
  
    const goToSearch = () => {  
      router.push({ name: 'Search', query: { keyword: 'vue3' } });  
    };  
  
    return { goToSearch };  
  },  
});  
</script>

在目标组件 Search.vue 中接收查询参数：

<template>  
  <div>  
    <p>Search for: {{ searchKeyword }}</p>  
  </div>  
</template>  
  
<script lang="ts">  
import { defineComponent, computed } from 'vue';  
import { useRoute } from 'vue-router';  
  
export default defineComponent({  
  setup() {  
    const route = useRoute();  
    const searchKeyword = computed(() => route.query.keyword);  
  
    return { searchKeyword };  
  },  
});  
</script>

2. Params 传参

在路由配置中，你需要为 params 预留位置：

const routes = [  
  // ...其他路由  
  {  
    path: '/user/:id',  
    name: 'User',  
    component: User  
  }  
];

导航到带参数的路由：

<template>  
  <button @click="goToUser">Go to User</button>  
</template>  
  
<script lang="ts">  
import { defineComponent } from 'vue';  
import { useRouter } from 'vue-router';  
  
export default defineComponent({  
  setup() {  
    const router = useRouter();  
  
    const goToUser = () => {  
      router.push({ name: 'User', params: { id: 123 } });  
    };  
  
    return { goToUser };  
  },  
});  
</script>

在目标组件 User.vue 中接收参数：

<template>  
  <div>  
    <p>User ID: {{ userId }}</p>  
  </div>  
</template>  
  
<script lang="ts">  
import { defineComponent, computed } from 'vue';  
import { useRoute } from 'vue-router';  
  
export default defineComponent({  
  setup() {  
    const route = useRoute();  
    const userId = computed(() => route.params.id);  
  
    return { userId };  
  },  
});  
</script>

注意: 使用 params 传参时，路径中的参数部分是必须的，并且刷新页面后参数不会丢失，因为它们被包含在了 URL 路径中。而 query 传参的参数在 URL 的查询字符串中，可以自由选择是否包含，但刷新页面后参数依然会保留，除非用户手动更改或清除 URL。