vue跳转页面常用的方法有哪些

魁首哥

作者

vue跳转页面常用的方法有哪些

这篇文章主要介绍“vue跳转页面常用的方法有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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)//路由配置path:"/home/:id"或者path:"/home:id"//不配置path,第一次可请求,刷新页面id会消失；配置path,刷新页面id会保留。//html取参$route.params.idscript取参this.$route.params.id3.带query参数<router-link:to="{name:'home',query:{id:123456}}">//query传参数(类似get,url后面会显示参数)//路由可不配置//html取参$route.query.idscript取参this.$route.query.id

2：this.$router.push()

1.不带参数this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})2.query传参this.$router.push({name:'home',query:{id:'123456'}})this.$router.push({path:'/home',query:{id:'123456'}})//html取参$route.query.idscript取参this.$route.query.id3.params传参this.$router.push({name:'home',params:{id:'123456'}})//只能用name//路由配置path:"/home/:id"或者path:"/home:id",//不配置path,第一次可请求,刷新页面id会消失//配置path,刷新页面id会保留//html取参$route.params.idscript取参this.$route.params.id4.query和params区别query类似get,跳转之后页面url后面会拼接参数,类似?id=123456,非重要性的可以这样传,密码之类还是用params刷新页面id还在params类似post,跳转之后页面url后面不会拼接参数,但是刷新页面id会消失。

3. this.$router.replace()

用法同上，和第2个的this.$router.push方法一样。

4. this.$router.go(n)

<button@click="upPage">[上一页]</button><button@click="downPage">[下一页]</button>upPage(){this.$router.go(-1);//后退一步记录，等同于history.back()},downPage(){this.$router.go(1);//在浏览器记录中前进一步，等同于history.forward()}

向前或者向后跳转n个页面，n可为正整数或负整数