本文主要介绍vue路由跳转的四种方式(带参数)。本文通过示例代码向您详细介绍，具有一定的参考价值。有需要的朋友可以参考一下。

1. router-link

1.没有参数

router-link :to={name:home}

router-link:to= { path:/home } //name，path可以，name推荐。

//注意：如果router-link中的链路以/开头，则以根路由开头；如果开始时没有“/”，则从当前路线开始。

2.带参数

router-link :to={name:home ，params: {id:1}}

//params传输参数(类似于post)

//路由配置路径：“/home/:id”或路径：“/home:id”

//如果没有配置path，可以第一次请求，刷新页面id会消失。

//配置路径，保留刷新页面id

//html take $ route.params.id。

//脚本取此。$route.params.id

router-link :to={name:home ，查询：{id:1}}

//查询传递参数(类似GET，参数会显示在URL之后)

//无法配置路由。

//html采用引用$ route.query.id。

//脚本取此。$route.query.id

2. this.$router.push() (函数里面调用)

1.没有参数

这个。$router.push(/home )

这个。$router.push({name:home})

这个。$router.push({path:/home})

2.查询传递参数

这个。$router.push({name:home ，query: {id:1}})

这个。$router.push({path:/home ，查询：{id:1}})

//html采用引用$ route.query.id。

//脚本取此。$route.query.id

3.参数介绍

这个。$ router.push ({name: home ，params:{ ID: 1 } })//只能使用name

//路由配置路径：“/home/:id”或路径：“/home:id”，

//如果没有配置path，可以第一次请求，刷新页面id会消失。

//配置路径，保留刷新页面id

//html take $ route.params.id。

//脚本取此。$route.params.id

4.查询和参数的区别

类似于查询get，跳转后的页面url后会拼接参数，类似于？Id=1，不重要的可以这样传，密码之类的还是可以用params刷新。页面id还在。

Params类似于post。跳转后，页面url后不会拼接参数，但是刷新后的页面id会消失。

3.这个。$router.replace()(同上，推送)

4.这个。$router.go(n)()

这个。$router.go(n)

或者前后跳转n页，其中n可以是正整数，也可以是负整数。

ps : 区别

这个。$router.push

跳转到指定的url路径，并将记录添加到历史堆栈中。单击“上一步”返回上一页。

这个。$router.replace

跳转到指定的url路径，但是历史堆栈中不会有记录。点击返回会跳转到上一页(即直接替换当前页)

这个。$router.go(n)

或者前后跳转n页，其中n可以是正整数，也可以是负整数。

总结

以上是边肖介绍的vue路由跳变的四种方式(带参数)的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您！