Vue系列vue-router的参数传递的两种方式（五）

前言

在上面的文章当中，小编已经使用过route.params的方式传递参数了，下面我们再来学习一种route.query参数传递的方式。

一、编写Profile页面

二、编写App.vue入口

普通的写法

<router-link v-bind:to="{path: '/profile',query: {name:'summer-少年',age:18,sex:1,email:'1973984292@qq.com'}}" tag="button" replace>档案</router-link>

当然你也可以这样写

<button @click="profileClick">档案</button>

触发点击事件

methods: {
    // 参数传递方式
    profileClick(){
        this.$router.push({
            path: '/profile',
            query: {
                name: 'ydf',
                age: 20,
                sex: 2,
                email: '1973984292@qqcom.cn'
            }
        })
    }
}

三、路由配置，index.js

携带参数：http://localhost:8080/profile?name=ydf&age=20&sex=2&email=1973984292%40qqcom.cn

四、对比route.params方式传参

路由index.js

App.vue入口

<router-link v-bind:to="'/user/'+userId+'/name/'+userName" tag="button" replace>用户</router-link>

或者这样写

<button @click="userClick">用户</button>

 // 参数传递方式
userClick(){
    // 带参数跳转
    this.$router.push('/user/' + this.userId+'/name/'+this.userName)
}

页面接受

五、项目中

 {
   path: '/dt/detail/:articleId',
    component: Detail
},

@click="detailFun(item.articleId)"

 detailFun(value) {
  this.$router.push(this.articleArray[0].path +'/'+ value)
},

{{$route.params.articleId}}

 created() {
        console.log(this.$route.params.articleId)
    }