利用路由进行页面跳转，并传值给跳转页面

前端开发中，经常会用到点击按钮或文本，就跳转到下一页面的情况，现进行总结~

首先要在router.js中添加要跳转的路由信息；

// router.js
{
meta：'学生信息展示'，
name: 'StuInfoShow'
path: 'student/StuInfoShow'
component: resolve => require([@/views/student/StuInfoShow],resolve)
}

在跳转前页跳转按钮触发的方法中使用this.$router.push方法跳转页面；

this.$router.push({name:'StuInfoShow', params:{id: id}})

注意：

此处this.$router.push有两种方式，params方式和query方式，这两种里面存放的都是传过去的参数，区别在于params方式会将传过去的参数和字段加到url上面，

https:///tald_40297452/article/details/907439256 // 只传递了参数值

而query方式传过去的参数和字段加到url上

http://collection-list?type=1&folder=7895008&key=2   // 字段type、folder key

将传送的参数值显示在跳转页上面，则只需要使用如下代码获取即可：

this.route.params.id   // 获取传送数据的id值 记住是route，而不是router

但通过这种params传值的方式，往往一刷新页面，传递的参数就会变成undefined，针对这种情况，应该在path中直接传递参数；或者直接用push方式传值，刷新后，传递的参数依旧存在；

// router.js
{
meta：'学生信息展示'，
name: 'StuInfoShow'
path: 'student/StuInfoShow/:name/:brithday/:class'   // 传递一个参数时只需student/StuInfoShow/:id即可
component: resolve => require([@/views/student/StuInfoShow],resolve)
}

搞定！

补充：

若传递的params中有个参数是个对象object，则跳转页面后，容易出现[Object object]，此时要对传递参数进行解析，一是要在传递参数地方，对该object进行解析，如：

this.$router.push({ path: '页面路径', query: { obj: JSON.stringify(obj) } })

在使用时，同样要进行解析，如：

obj = JSON.parse(this.$route.query.obj)

接下来就可以随意使用obj对象中的字段了~

参考链接

vue-router 路由怎么传递一个或多个参数？_前端攻城狮-CSDN博客_vue路由传多个参数

Vue路由传参,刷新页面，参数变成[Object object]_codezha的博客-CSDN博客