Home > Article > Web Front-end > How to jump with parameters in vue.js
Vue.js jump method with parameters: First create [readDetail.vue] and register the route in [index.js]; then jump through [router-link], or through [$router] 】 method to jump.
The operating environment of this tutorial: windows10 system, vue2.5.2, this article is applicable to all brands of computers.
【Recommended related articles: vue.js】
vue.js method of jumping with parameters:
First create readDetail.vue and register the route in index.js.
Page delivery method:
1. Jump through 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>
path -> is the routing path to be jumped, It can also be the name value configured in the routing file. Both can be used for routing navigation
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 }*/ })Acceptance method
this.$route.params.参数名 this.$route.query.参数名Experiment (including two methods):Transmission page:
<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.' } },Receive page:
<div class="container"> <p style="color:red;">Num:{{ myIndex }}</p> <p>{{ msg }}</p> </div>-----------------------------------------------------------data () { return { msg: '', // 保存传递过来的index myIndex: '' }-----------------------------------------------------------mounted: function () { this.msg = this.$route.params.msgKeyOne this.myIndex = this.$route.params.msgKey console.log(this.myIndex) }
Related free learning recommendations:javascript (video)
The above is the detailed content of How to jump with parameters in vue.js. For more information, please follow other related articles on the PHP Chinese website!