传递参数的方式：

Demo：

<template>
  <div id="app">
    <!-- <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link> -->
    <!-- <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link> -->
    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->

    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!--动态路由-->
    <!-- <router-link :to="'/user/'+userId">用户</router-link> -->
    <!-- <router-link to="/profile">档案</router-link> -->
    <!-- <router-link :to="{path:'/profile', query:{name:'mazhen',age:27}}">档案</router-link> -->

    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'App',
    data(){
      return{
        userId:'zhangsan',
        userInfo:{
          name:"mazhen",
          age:27
        }
      }
    },
    computed: {
      userMessage(){
        return JSON.stringify(this.userInfo);
      }
    },
    methods: {
      homeClick(){
        // 通过代码的方式修改路由 vue-router
        this.$router.push('/home');     
        // this.$router.replace('/home');     
      },
      aboutClick(){
        this.$router.push('/about');
        // this.$router.replace('/about');    
      },
      userClick(){
        this.$router.push('/user/'+this.userId);
      },
      profileClick(){
        this.$router.push({
          path:'/profile',
          query:this.userInfo
        });
      }
    },
  }
</script>

<style scoped>
  .active {
    color: red;
  }
</style>