vue的页面跳转方式和传值、取值

发布网友发布时间：2024-09-26 16:56

共1个回答

热心网友时间：2024-10-25 05:52

在Vue开发中，页面间的跳转以及值的传递和获取是常见的需求。主要通过两种方式实现：router-link和$router对象。

首先，利用router-link进行跳转，有以下两种传递参数的方式。一是使用query，它附在URL路径之后，以"?"开始。例如，通过``跳转，取值则为`this.$route.query.key`。这种方式适合传递简单的键值对，且数据会随着刷新而保留。

另一种是params，它作为路由名称的一部分，不会显示在URL中。通过``跳转，取值为`this.$route.params.key`。这种传递方式适合传递对象或需要隐藏的参数，但刷新页面后数据会丢失。

另一种直接使用$router对象进行跳转的方法，可以同时通过query和params。如`this.$router.push({ path: '/detail', query: { name: 'admin', code: 10021 } })`，将生成`/detail?name=admin&code=10021`的地址，取值则为`this.$route.query.name`。通过params传递时，如`this.$router.push({ name: 'detail', params: { code: 10021 } })`，跳转地址是`/detail`，参数在页面刷新后会消失，取值为`this.$route.params.code`。

总结来说，Vue中页面跳转与参数传递可根据具体需求选择query（URL查询参数）或params（路由名称参数），理解并灵活运用这两种方式将有助于你的页面交互设计。