VUE路由跳转页面传参的方式

VUE路由跳转页面传参的方式：

 方式一：声明式导航（router-link）

1、不带参数  (注意：链接中如果是“/”开始就是从根路由开始，否则就是从当前路由开始)

           

 

2、带参数

// 路由配置  path："/home:/id" 或  path:"/home:id"

// 不配置path，第一次可请求，刷新后id会消失，若配置path刷新页面id会保留

 方式二：编程式导航  this.$router.push()

1、不带参数

this.$router.push("/home") 

this.$router.push("{name:'home'}")

this.$router.push("{path:'/home'}")

2、带参数（注意：此处分为query传参和params传参并注意两者的区别）

this.$router.push("{name:'home',params:{id:1}}")

this.$router.push("{path:'/home',query:{id:1}}")

// html获取参数$route.params.id, script获取参数this.$route.params.id

// 注意name和params搭配，path和query搭配

 两者的区别：

  params类似于post属于密文传参，参数不会显示到URL地址栏中，如有涉及到隐私的用其较合适，                         

  query类似于get，所传的参数会显示到URL地址栏中，相对来说安全性不高                         

   params传参刷新会无效，但是query会保存传递过来的值，刷新不变

3、this.$router.replace()  用法参考push的用法

4、this.$router.go(n)()   此方法是向前或向后跳转n个页面，n为正整数或者负整数

注意其三者之间的区别：

this.$router.push()是跳转到指定url路径，并在history中添加一个记录，点击返回会跳到上一个页面       

this.$router.replace()是跳转到指定的url路径，但是在history中没有记录，点击返回会跳到上上个页面        

 this.$router.go(n)()是向前或向后跳转n个页面，n为正整数或者负整数

总结：

关于路由跳转页面的方法博主介绍到这里，希望对大家有所帮助。如果大家有任何疑问请给我留言，博主看到后会及时回复。