共计 1339 个字符,预计需要花费 4 分钟才能阅读完成。
导读 | 本文介绍了 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 可为正整数或负整数。
正文完
星哥说事-微信公众号
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)