vue 跳转页面并传递参数

首先创建readDetail.vue 且在index.js中注册路由。
传递页面方式：

  
    跳转  

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航  
 2. params -> 是要传送的参数,参数可以直接key:value形式传递  
 3. query -> 是通过 url 来传递参数的同样是key:value形式传递

this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

 this.$router.push({  
            path: 'yourPath',   
            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',  
            params: {   
                key: 'key',   
                msgKey: this.msg  
            }  
              
        })

this.$route.params.参数名

this.$route.query.参数名

实验(包含两种方式)：
传递页：

 
                跳转
              传递-----------------------------------------------------------------------------------------
export default {
    name: 'reads',
    data () {
      return {
        msg: 'msg test.'
      }
    },

接收页：

    Num：{{ myIndex }}

    
{{ msg }}
  -----------------------------------------------------------
data () {
      return {
        msg: '',
        // 保存传递过来的index
        myIndex: ''
      }
-----------------------------------------------------------
mounted: function () {
      this.msg = this.$route.params.msgKeyOne
      this.myIndex = this.$route.params.msgKey
      console.log(this.myIndex)
    }

实验结果：

作者：张中华
链接：https://www.jianshu.com/p/c699c4d197de