vue.js如何带参数跳转-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

vue.js带参数跳转的方法：首先创建【readDetail.vue】且在【index.js】中注册路由；然后通过【router-link】进行跳转，或者通过【$router】方式跳转。

本教程操作环境：windows10系统、vue2.5.2，本文适用于所有品牌的电脑。

【相关文章推荐：vue.js】

vue.js带参数跳转的方法：

首先创建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>

path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
params -> 是要传送的参数,参数可以直接key:value形式传递
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  
            }*/ 
        })