vue 跳转页面并传递参数

偏执的太偏执、 2021-06-24 16:10 558阅读 0赞

首先创建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.'
          }
        },

接收页：

<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)
        }

实验结果：

![2789632-64dc47141f5a2270.gif][]

[2789632-64dc47141f5a2270.gif]: /images/20210615/4d113d63a919470585b91b62943ead4f.png