vue-router参数传递

3月

本文最后更新于2022年09月23日，已经过了789天没有更新，若内容或图片失效，请留言反馈

vue-router传递参数组要有两种类型：params和query

params

配置路由格式：/router/:id
传递到方式：在path后跟上对应的值
传递后形成的路径：/router/123，/router/abc

具体文章

query的类型:方式一

配置路由格式：/router，也就是普通配置
传递到方式：在对象中使用query的key作为传递方式
传递后形成的路径：/router?id=123，/router?id=abc

我们要在Profile组件中获取根组件传递过来的数据

步骤：

创建路由组件

在路由中配置映射

{

text 代码:

path: '/profile',
name: 'Profile',
component: () => import('../views/Profile.vue')

}

在跟组件中使用router-link

//App.vue

使用v-bind为to属性绑定一个对象{path:'/path',query:{key:value}}

运行后url为：http://localhost:8080/profile?name=xiufan&age=21

在Profile.vue中获取query

text 代码:

//Profile.vue
<template>
    <div id="profile">
        <h1>this is profile page</h1>
        <p>name:{{name}}</p>
        <p>age:{{age}}</p>
    </div>
</template>

<script>
    export default {
       name: "Profile",
        data() {
            return {
                name : this.$route.query.name ,
                age : this.$route.query.age
            }
        }
    }
</script>

query的类型:方式二

不使用router-link
假如我们想点击一个按钮时跳转路由，并将参数传递过去

可以为button添加一个点击事件，在事件方法中使用this.$router.push({path:'',query:{key:value}})

text 代码:

//App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <button @click="profileClick">Profile</button>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data(){
      return{
        userId:"123"
      }
    },
    methods : {
        profileClick(){
          this.$router.push({
            path :'/profile',
            query : {
              name:'xiufan',
              age:21
            }
          })
        }
    }
  }
</script>

运行结果与方式一相同