25.路由中数据传递的两种方式

路由中数据传递的两种方式：params和query。

image.png

params传递数据前面已经说过了，下面主要说一下query传递数据

首先，我们需要创建一个新的组件，profile.vue

<template lang="">
    <div>
        <h2>我是profile页面</h2>
        <h2>{{$route.query.name}}</h2>
        <h2>{{$route.query.age}}</h2>
        <h2>{{$route.query.height}}</h2>
    </div>
</template>
<script>
export default {
    name: 'Profile'
}
</script>
<style lang="">
    
</style>

然后，我们在路由文件中定义一下组件的映射关系

const Profile = () => import("../components/Profile.vue")
let routes = [
    {
      path: '/profile',
      component: Profile
    }

]

接着，我们需要在使用一下这个组件，在app.vue中

<template>
  <div id="app">
    <router-link to="/Home">首页</router-link>
    <router-link to="/About">关于</router-link>
    <router-link :to="'/User/'+ userId">用户</router-link>
    <router-link :to="{path: '/profile', query: {name: 'zhangsan', age: 18, height: 1.88}}">档案</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'lisi'
    }
  },
  methods: {
    
  }
}
</script>

<style>

</style>

注意：profile路由的to属性是一个对象，其实所有的to属性都可以写成对象的形式，这样方便query的传值。