vue-router 参数传递

传递参数的两种形式：router-link 和 js代码【如果有大量的数据需要传，使用query】

1、传递参数主要由两种类型： params 和 query

1.1、

 

 

地址栏结果：

 1.2、

 地址栏结果：

2、不使用router-link传参，用button传参（js代码传参）

<template>
  <div id="app">
  <router-link to = "/home">home</router-link>
  <router-link to = "/about">about</router-link>
  <!-- <router-link :to = '"/user/"+userid'>user</router-link> -->

  <!-- <router-link to = "/profile">档案管理</router-link> -->
  <!-- <router-link :to = '{
     path:"/profile",
     query:{
      name:"lisi",
      age:12,
      height:"一米八"
     }
    }'>档案管理</router-link> -->
    <button @click = "clickUser">user</button> 
    <button @click = "clickProfile">profile</button>
 
    <router-view></router-view>

  
  </div>
</template>

export default {
  name: 'app',
  data(){
    return {
      userid:"张三"
    }
  },
  components: {
  },
  methods:{
    clickUser(){
      this.$router.push('/user/'+this.userid)
    },
    clickProfile(){
      this.$router.push({
        path:"/profile",
        query:{
          name:"lisi",
          age:12,
          height:"yimiba"
        }
      })
    }
  }
}