Vueルーティングパラメータparams query

1.params構成ルーティングフォーマット:/router/:id転送方式:pathの後に対応する値転送に続くパス:/router/123,/router/abc

const routes=[
//     
{
   path:'/user/:userId',
   component:home
}

//  app.vue 
 <router-link  :to="'/user/'+userId">  </router-link>  
 
//  user.vue  （       ）
<template>
    <div>
       {{userId}}   //        
       {{$route.params.userId}}  //     
    <div>
</template>
 <script>
    export default{
        name:'User',
        computed:{
                 usrId(){
                   return  this.$route.params.userId   
                   //        userId            
                   //$route              
                 }
         }
}
 </script>

リスニングタグでクリック

this.$router.push({
 path:"/detail",
 params:{
 name:'nameValue',
 code:10011
 }
});

2.query構成ルーティングフォーマット:/router、つまり通常の構成は上にコロンがあるように伝達されない:オブジェクトでqueryのkeyを伝達方式として伝達した後に形成される経路:/router?id=1253,/router?id=adc

//     
const Profile = () =>import('../components/Home')
{
   path:'/profile',
   component:Profile
}

//  app.vue 
 <router-link  :to="{path:'/profile',query:{name:'abc',age:18}}">  </router-link>  //  v-bind  
 //  user.vue  （       ）
<template>
    <div>
       {{$route.query.name}} 
    <div>
</template>
 <script>
    export default{
        name:'User',
        computed:{
             age(){
                 return  this.$route.query.age 
             }
         }
}
 </script>

リスニングタグでクリック

<div id=“app”>
    <button @click="btn1click">  </button>   
    <button @click="btn2click">  </button>  
</div>

<script>
let app=new Vue({
  el:'app',
  data:{
  },
  methods:{
   btn1click(){
     this.$router.push({
        path:'/profile',
        query:{
           name:'zhangsan',
           age:180
        }
     }) 
   },
   btn2click(){
     this.$router.replace('/about')        //history.replaceState()      
   }
  }
)}
</script>