vue-router-参数传递

例子：从App.vue跳转到user.vue，并且App.vue传参数给user.vue
1.配置动态路由

• 跳转页在index.js里的路径为：

{
      path: '/user/:userId',
      name: 'user',
      component: user
    }

其中:userId相当于动态占位符

• 在当前页app.vue中配置跳转路径

<router-link v-bind:to="'/user/'+userId">user</router-link>
<router-view/>

• 在user.vue里获取app.vue传来的参数

  computed:{
    userId(){
      return this.$route.params.userId
    }

2.标签中携带参数

• 跳转页在index.js里的路径为：

{
      path: '/user',
      name: 'user',
      component: user
    }

• 在当前页app.vue中配置跳转路径

 <router-link v-bind:to="{path:'/user',query:{name:'why',age:18,height:1.88}}">user</router-link>

此时跳转路径变为：

• user端取url中的参数

 {{$route.query.name}}

还可以通过路由名字name（需要自己在router.js里进行配置的）,与params进行搭配

<router-link v-bind:to="{name:'user',params:{name:'why',age:18,height:1.88}}">user</router-link>

获取参数

{{$route.params.name}}

其中path与query搭配，相当于get请求，参数在url后面显示
name与params搭配,相当于post请求，参数不在url中显示
3.通过点击button实现url的跳转

• 定义两个按钮

<button @click="userClick">user</button>
<button @click="aboutClick">about</button>

• 定义按钮点击事件

userClick(){
     this.$router.push('/user/'+this.userId)
   },
   aboutClick(){
     this.$router.push({
       path:'/about',
       query:{
         name:'kobe',
         age:19,
         height:1.88
       }
     })
    //  this.$router.push('/user/'+)
   }

• about界面通过route获取参数

{{$route.query.name}}

区分$router与$route的区别
router里包含所有的url

route只包含当前点击的url,又叫活跃的url