本教程操作环境：windows7系统、vue2.9.6版，dell g3电脑。
首先创建readdetail.vue 且在index.js中注册路由。
传递页面方式：
1.通过router-link进行跳转<router-link :to="{ path: 'yourpath', params: { key: 'value', // ordernum : this.searchdata.orderno }, query: { key: 'value', // ordernum : this.searchdata.orderno } }"> <button type="button">跳转</button> </router-link> 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航 2. params -> 是要传送的参数,参数可以直接key:value形式传递 3. query -> 是通过 url 来传递参数的同样是key:value形式传递
2. $router方式跳转this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
this.$router.push({ path: 'yourpath', name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找', params: { key: 'key', msgkey: this.msg } /*query: { key: 'key', msgkey: this.msg }*/ })
接受方式this.$route.params.参数名
this.$route.query.参数名
实验(包含两种方式)：
传递页：
<router-link :to="{ name: 'readdetail', params: { msgkeyone: 'jump test.' }}"> <button type="button">跳转</button> </router-link><button @click="sendparams">传递</button>-----------------------------------------------------------------------------------------export default { name: 'reads', data () { return { msg: 'msg test.' } },
接收页：
<p class="container"> <p style="color:red;">num：{{ myindex }}</p> <p>{{ msg }}</p> </p>-----------------------------------------------------------data () { return { msg: '', // 保存传递过来的index myindex: '' }-----------------------------------------------------------mounted: function () { this.msg = this.$route.params.msgkeyone this.myindex = this.$route.params.msgkey console.log(this.myindex) }
实验结果：
相关推荐：《vue.js教程》
以上就是vuejs中跳转如何传参的详细内容。