页面跳转的常见方法

页面跳转的常见方法：

—— 不携带参数跳转页面——

在Vue中，经常用到的页面跳转方式有以下几种：

1. 使用 标签进行跳转。

是vue-router提供的组件，通过声明式的方式实现页面跳转。它会被渲染成一个标签，在用户点击时会向路由器发出导航请求，触发路由器的跳转行为。例如：

<router-link to="/home">去首页</router-link>

1. 使用 $router.push()方法进行编程式跳转。

$router.push()方法是Vue提供的路由导航方法，可以在代码中进行跳转，主要与的作用类似。它的调用方式是：

this.$router.push({ path: '/home' })

1. 使用 $router.replace()方法进行页面替换。

$router.replace()方法与$router.push()类似，也是实现页面跳转的方式之一，但它的作用是替换当前的历史记录（即不会添加新的历史记录），例如：

this.$router.replace({ path: '/home' })

1. 使用 window.location.href属性进行跳转。

window.location.href是网页跳转的最原始方式，即通过修改浏览器的url来实现页面跳转。但在Vue中，这种方式不推荐使用，因为它不是路由导航，会导致一些路由钩子无法生效，如beforeEnter等。

以上是Vue中常用的页面跳转方式，具体应该选择哪种方式，可以根据实际需求和场景来决定。

—— 携带参数跳转页面——

在Vue中，常用的携带参数的方式包括：

1. 使用URL查询参数

可以使用URL查询参数（即?key=value）的形式，来携带参数。例如：

this.$router.push('/home?id=123')

在目标路由组件中，可以通过$route.query来获取传递的参数，例如：

console.log(this.$route.query.id) // 123

j

1. 使用路由参数

可以将参数作为路由的参数（即:id）进行传递。例如：

this.$router.push('/home/123')

在路由配置中，可以声明路由参数，例如：

{  path: '/home/:id',  component: Home }

在目标路由组件中，可以通过$route.params来获取传递的参数，例如：

console.log(this.$route.params.id) // 123

j

1. 使用

query对象携带参数

query对象是$router.push()方法第二个参数中的一个选项，用于在路由之间传递数据。例如：

this.$router.push({ path: '/home', query: { id: 123 }})

在目标路由组件中，可以通过$route.query来获取传递的参数，例如：

console.log(this.$route.query.id) // 123

1. 可以根据具体的业务需求来扩展这种方式。如果你想传递多个参数，只需要在params对象中添加对应的参数名称和值即可。例如：

this.$router.push({  name: 'pay', //路由的名称 
params: {    sn: data.data,    amount: 100,    orderId: '12345'  } });

在目标路由组件中，你可以通过this.$route.params来访问传递的参数。例如，在pay组件中可以通过this.$route.params.sn来获取sn参数的值。

需要注意的是，通过params传递参数时，目标路由的定义中需要声明相应的路由参数，例如：

{  path: '/pay/:sn',  name: 'pay',  component: Pay }

在目标路由组件中，可以通过$route.query来获取传递的参数，例如：

console.log(this.$route.params.sn） // 123

j