Vue学习之VueRouter路由传递参数

• params属性动态路由传参
• • 拓展用法：使用`$router.push`传递参数
• Query属性查询字符串传参
• meta属性路由元信息传参
• name属性传值传参

VueRouter是Vue.js官方的路由管理器，用于构建单页面应用程序。VueRouter通过路由配置映射URL，然后根据URL匹配到对应的组件渲染出来。

VueRouter提供了多种传递参数的方式，以下是一些常见的例子：

params属性动态路由传参

动态路由是指在路由配置时指定参数，这些参数可以通过$route.params访问。在组件内可以通过props接收参数，也可以通过this.$route.params访问。

const router = new VueRouter({routes: [{ path: '/user/:id', component: User }]
})// 访问路径为/user/123
// 在组件内可以通过props接收参数，也可以通过this.$route.params访问
const User = {props: ['id'],template: '
{{ id }}
',created() {console.log(this.id) // 输出123console.log(this.$route.params.id) // 输出123}
}

拓展用法：使用$router.push传递参数

// 在路由配置中定义路由
const router = new VueRouter({routes: [{path: '/user/:id',name: 'user',component: User}]
})// 在组件中通过$router.push传递参数
this.$router.push({ name: 'user', params: { id: userId } })// 在组件中通过$route.params来接收参数
export default {mounted() {const userId = this.$route.params.id// ...}
}

在上面的示例中，我们定义了一个路由/user/:id，其中:id是一个动态路由参数，表示用户ID。我们通过name属性将其命名为user，然后可以在组件中使用$router.push方法来跳转到该路由，并将参数传递给它。在接收参数时，我们可以通过$route.params来获取到路由参数。

Query属性查询字符串传参

查询字符串是指在URL后面以?key=value的形式传递参数，这些参数可以通过$route.query访问。在组件内可以通过props接收参数，也可以通过this.$route.query访问。

const router = new VueRouter({routes: [{ path: '/user', component: User }]
})// 访问路径为/user?key=123
// 在组件内可以通过props接收参数，也可以通过this.$route.query访问
const User = {props: ['id'],template: '
{{ id }}
',created() {console.log(this.id) // 输出123console.log(this.$route.query.id) // 输出123}
}

meta属性路由元信息传参

路由元信息是指在路由配置时指定一些元数据，这些元数据可以通过$route.meta访问。在组件内可以通过props接收参数，也可以通过this.$route.meta访问。

const router = new VueRouter({routes: [{ path: '/user', component: User,meta: {id: 123}}]
})// 访问路径为/user
// 在组件内可以通过props接收参数，也可以通过this.$route.meta访问
const User = {props: ['id'],template: '
{{ id }}
',created() {console.log(this.id) // 输出123console.log(this.$route.meta.id) // 输出123}
}

name属性传值传参

{path: "/main",name: {user: {name: "我使用的name传递参数",pwd: "1213456",},},component: MainVue,
}// ==========================
{{ $route.name }}
或者
mounted: function () {console.log(this.$route.name)
},

这些是VueRouter中常用的参数传递方式，可以根据实际需求选择适合的方式。