详解vue 路由跳转四种方式 (带参数)[转载](vue路由跳转的三种方法)

编辑：rootadmin

详解vue 路由跳转四种方式 (带参数)

推荐整理分享详解vue 路由跳转四种方式 (带参数)[转载](vue路由跳转的三种方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue路由自动跳转,vue的路由跳转了,可是页面没有变化,vue路由跳转的原理,vue路由跳转的原理,vue3 路由跳转,vue2路由跳转,vue3 路由跳转,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)// 路由配置 path: "/home/:id" 或者 path: "/home:id" // 不配置path ,第一次可请求,刷新页面id会消失// 配置path,刷新页面id会保留// html 取参 $route.params.id// script 取参 this.$route.params.id<router-link :to="{name:'home', query: {id:1}}"> // query传参数 (类似get,url后面会显示参数)// 路由可不配置// html 取参 $route.query.id// script 取参 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:'1'}})this.$router.push({path:'/home',query: {id:'1'}})// html 取参 $route.query.id// script 取参 this.$route.query.id

3. params传参

this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,// 不配置path ,第一次可请求,刷新页面id会消失// 配置path,刷新页面id会保留// html 取参 $route.params.id// script 取参 this.$route.params.id

4. query和params区别

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在 params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。

3. this.$router.replace()

(用法同上,push)

4. this.$router.go(n) ()

this.$router.go(n)

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

为了保存收藏,转载到自己的文章中, 原创文章大佬 : http://t.csdn.cn/QSVJF

本文链接地址:https://www.jiuchutong.com/zhishi/300591.html 转载请保留说明！

上一篇：Vue中的v-for循环，实现div块的循环生成(vue里的for循环)

下一篇：IDEA 创建Maven Web项目(idea 创建maven项目读取pom报错)