vue 參數傳遞

傳遞參數主要有兩種類型：params和query

params的類型：

配置路由格式：/router/:id

傳遞的方式：在path後面跟上對應的值

傳遞後形成的路徑：/router/123，/router/abc

query的類型 

（query攜帶的參數會帶在地址導航欄中）

配置路由格式：/router，也就是普通配置

傳遞的方式，對象中使用query的key作爲傳遞方式

傳遞後形成的路徑：/router?id=123,/router?id=abc

 

1.新建profile.vue

<template>
    <div>
        <h2>這是profile</h2>
        <p>{{$route.query.age}}</p>
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

2.配置路由映射

,
    {
        path: '/profile',
        component: () => import(/* webpackChunkName: "about" */ '../views/Profile.vue')
    }

3.使用 app.vue

<router-link :to="{path: '/profile',query: {name:'why',age:18}}">檔案</router-link>

4.query效果

 

通過方法的方式攜帶參數

<button @click="profileClick">profile</button>
profileClick(){
              this.$router.push({
                  path: '/profile',
                  query:{
                      name: "aaa",
                      age: 18
                  }
              })
          }

獲取參數內容使用 $route.query.name