Vue是一个基于组件化的JavaScript框架，它能快速构建Web应用程序，其中路由是它的一个重要功能之一。路由是前端开发中管理应用程序中URL的机制。它将不同URL映射到组件，并允许您在使用应用程序时动态地更新URL。在Vue中使用路由传参和接收参数是一个重要而常见的操作。本文将围绕这个主题，分享如何在Vue中使用路由传参和接收参数。
1. 安装和配置Vue-router
Vue-router是Vue.js官方提供的路由管理器，它用于实现单页应用的导航。它可以轻松地将组件映射到URL，同时支持路由参数、嵌套路由、视图过渡等功能。要在Vue中使用路由传参和接收参数，首先需要安装和配置Vue-router。
通过npm安装Vue-router：
npm install vue-router --save在main.js中引入Vue-router和定义路由：
import VueRouter from 'vue-router'
import { routes } from './routes'
const router = new VueRouter({
routes,
mode:'history', //使用history模式
})
new Vue({
router,
}).$mount('#app')
在代码中，定义了一个路由实例，我们使用routes选项来定义路由配置，并启用history模式。这样，我们就可以像使用任何其他组件一样使用路由。
2. 传递参数
在Vue-router中，可以通过path来定义路由的路径，并在其中设置参数。参数可以通过两种方式传递：动态路径参数和查询参数。
2.1. 动态路径参数
动态路径参数允许您将参数作为一部分URL路径来传递。例如，我们可以创建一个动态路径参数:id并将其设置为某个组件的路径。然后，我们可以在该组件中通过$router对象的params属性来访问该参数。
例如，我们有一个User组件，路径为/users/:id，其中:id是动态路径参数。那么我们可以定义路由和访问该参数的代码如下：
import User from './components/User.vue'
export const routes = [
{ path: '/users/:id', component: User },
]
<template>
<div>
<h3>User {{ $route.params.id }}</h3>
</div>
</template>
在上面的代码中，我们通过使用$this.$route.params来访问参数。在渲染用户组件时，路由把id参数注入到组件中，在组件中通过$this.$route.params.id就可以访问它。
2.2. 查询参数
查询参数允许您将参数作为URL查询字符串传递。它们以问号（？）开始，并使用键值对来表示参数。例如，我们可以使用查询参数来过滤用户列表。
例如，我们有一个UserList组件，路径为/users，我们希望可以通过查询参数来过滤用户列表。那么我们可以定义路由和访问查询参数的代码如下：
import UserList from './components/UserList.vue'
export const routes = [
{ path: '/users', component: UserList },
]
<template>
<div>
<input type="text" v-model="query" placeholder="Search users">
<ul>
<li v-for="user in filteredUsers" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
users: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Peter' },
{ id: 3, name: 'Mary' },
],
query: ''
}
},
computed: {
filteredUsers () {
return this.users.filter(user => user.name.toLowerCase().indexOf(this.query.toLowerCase()) !== -1)
}
}
}
</script>
在上面的代码中，我们通过使用v-model指令绑定输入框来过滤用户列表。当query值发生变化时，我们使用computed属性过滤出与查询参数匹配的用户列表。该computed属性的filteredUsers属性返回我们筛选后的用户列表。
3. 接收参数
接收参数就是在我们从一个组件跳转到另一个组件时，将数据从一个组件传递到另一个组件。在Vue中，我们可以使用props来接收参数。让我们看一下如何在组件中使用props接收路由参数。
例如，我们有一个User组件，路径为/users/:id，其中:id是动态路径参数。现在，我们希望在该组件中显示用户的详细信息。我们可以从组件中获取id,然后通过id参数来获取该用户的信息，并将它们渲染到该组件中。
import User from './components/User.vue'
export const routes = [
{ path: '/users/:id', component: User, props: true },
]
在上面的代码中，我们通过props设置为true来告诉路由将params中的所有参数转换为props传递到User组件中。
然后在User组件中，我们可以通过props来访问传递的参数了：
<template>
<div>
<h3>User {{ user.id }}</h3>
<p><strong>Name:</strong> {{ user.name }}</p>
<p><strong>Email:</strong> {{ user.email }}</p>
</div>
</template>
<script>
export default {
props: ['id'],
computed: {
user () {
return this.$store.state.users.find(user => user.id == this.id)
}
}
}
</script>
在上面的代码中，我们定义了一个props的属性，它接收路由参数中的id值，然后我们使用计算属性来获取具有相应ID的用户信息并将用户信息显示在模板中。
总结
在Vue中使用路由传参和接收参数是非常方便的，它让我们可以轻松地控制应用程序中的URL，并能够在组件之间传递数据。在本文中，我们演示了如何使用Vue-router传递动态路径参数和查询参数，并使用props接收参数，以便在Vue中实现路由传参和接收参数。希望这篇文章能够帮助您更好地理解Vue-router，并使用Vue-router构建高效可扩展的单页应用程序。