Vue：不同页面之间的传递参数--params

1.参数在url中显示

首先你要确定自己要传的参数，并在控制路由的文件中的Router中path内添加对应的字段如：

{
      path: '/details/:id',
      name: 'details',
      component: details
}

我要传的参数是活动id。

在你要跳转的组件内定义参数，如：

var info = {id:"123",message:"成功"}

同时在HTML中引入它们，通过router-link跳转（也可以通过点击事件，push()跳转）,插入对应的字段。注意：如果参数个数不同，将不会出现预期效果！

<router-link :to="{path:'/details/'+stu.id}"><button>goto paramsUrl</button></router-link>

当然，你也可以通过this.$route.params.name来获取参数

2.通过name避免在url显示

通过上面的介绍，相信你也看出来相对应的弊端~不安全。如果用户篡改url中的参数，将会出现我们不想看到的问题。那么如何避免呢？---name

上边对Router中的操作只是改了 path,现在我们在添加一个name参数。

{
      path: '/details',
      name: 'details',
      component: details
}

这里我们通过点击事件进行跳转~

<button @click="goParam">go to param</button>

在methods中编写方法

goParam:function(){
    this.$router.push({name:'details',params:info})
}