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>