vue-router 传递参数

1.Vue传递参数的方式

query：
传值

    <router-link :to="{path: '/profile',query:{name:'zhangsan',age:18,height:1.88}}" tag="button">档案</router-link>

代码方式：

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


profileClick(){
      this.$router.push({
        path: '/profile',
        query: {
          name: '张三',
          age:18,
          height: 1.88
        }
      })
    }

取值

	<h2>{{$route.query.name}}</h2>
    <h2>{{$route.query.age}}</h2>
    <h2>{{$route.query.height}}</h2>

params:

传值

<router-link :to="/user/+userid" tag="button">用户</router-link>

取值

<template>
  <div>
    <h2>我是用户界面</h2>
    <p>我是用户信息，嘿嘿嘿</p>
    <h2> 通过计算属性：{{userId}}</h2>
<!--  直接获取参数  -->
    <h2>{{$route.params.userid}}</h2>
    </div>
</template>

<script>
export default {
  name: "User",
  computed:{
    userId(){
      //$route :拿到处于活跃状态的路由
      console.log(this.$route);
      return this.$route.params.userid
    }
  }
}
</script>

代码方式：

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

userClick(){
      this.$router.push('/user/'+this.userid)
    }