vue 跳转页面并传递参数

首先创建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:{参数名:参数值,参数名:参数值}})

params和query传参需要在push必填name,params和query各有优劣，自己搭配使用

 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.'}},

接收页：

<div class="container"><p style="color:red;">Num：{{ myIndex }}</p><p>{{ msg }}</p></div>
-----------------------------------------------------------
data () {return {msg: '',// 保存传递过来的indexmyIndex: ''}
-----------------------------------------------------------
mounted: function () {this.msg = this.$route.params.msgKeyOnethis.myIndex = this.$route.params.msgKeyconsole.log(this.myIndex)}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！