首页 > 代码库 > Vue 参数传递及刷新后依旧存在

Vue 参数传递及刷新后依旧存在

获取参数方式有两种:

1、params
2、query

第一种方式: params
this.$router.push({name:‘Hello‘,params:{name:‘zs‘,age:‘22‘}});
name:组件中的命名
params 中两个参数分别为name,age

跳转 hello这个组件,获取参数值:
var name = this.$route.params.name;  
var age = this.$route.params.age;
这样就会获取到相应参数

浏览器地址为
http://localhost:8080/#/hello/

 



问题来了 ,刷新参数不见了如何解决往下看



在router路由中有个path
  .....
{ path:‘/hello/:name/:age, name:‘Hello‘, component: Hello }

这里要使用  /:name   如果有多个可以这样 /:name/:age/.......

这是浏览器 显示

http://localhost:8080/#/hello/zs/22

zs ,22就是值。

 

第二种方法:

query

  跳转URL携带参数

this.$router.push({name:‘Hello‘,query:{name:‘zs‘,age:‘22‘}});

在组件中获取

   

  var name= this.$route.query.name; 
  var age = this.$route.query.age;  

 

浏览器会显示

http://localhost:8080/#/?name=zs&age=22

 

两种方式都可以解决刷新参数不见问题。

 

跳转链接

 






Vue 参数传递及刷新后依旧存在