vue中跳转页面,vue页面跳转别的vue页面

vue中跳转页面,vue页面跳转别的vue页面,vue跳转页面常用的4种方法与区别小结

本文主要介绍了关于vue跳转页面的四种常用方法及其区别，通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

1：router-link跳转

1.没有参数

router-link :to='{name:'home'} '

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

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

2.使用params参数

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

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

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

//如果没有配置path，可以第一次请求，刷新页面id会消失；配置路径，刷新页面id将被保留。

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

3.使用查询参数

router-link :to='{name:'home '，query: {id:123456}} '

//查询传递参数(类似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:'123456'}})

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

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

3.参数介绍

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

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

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

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

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

4.查询和参数的区别

类似于查询get，跳转后的页面url后会拼接参数，类似于？Id=123456。如果不重要，可以这样通过。密码之类的东西仍然被用来用params刷新页面id。

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

3. this.$router.replace()

用法和这个一样。第二个中的$router.push方法。

4. this.$router.go(n)

Button @click='upPage'[上一页]/button

Button @click='向下翻页'[下一页]/button

upPage() {

这个。$ router . go(-1)；//后退一步进行记录，相当于history.back()

定金(){

这个。$ router . go(1)；//在浏览器记录中前进一步，相当于history.forward()

}

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

ps : 区别

这个。$router.push

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

这个。$router.replace

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

这个。$router.go(n)