vue-router传递参数

---

传递参数主要有两种类型: params 和 query

一、params的方式

配置路由格式: /router/:id （动态路由）

• 传递的方式: 在path后面跟上对应的值
• 传递后形成的路径: /router/123, /router/abc

const router = new VueRouter({
     
  routes: [
    // 动态路径参数 以冒号开头
    {
      path: '/user/:id', component: User }
  ]
})

---

二、query的方式

配置路由格式: /router, 也就是普通配置

const router = new VueRouter({
     
  routes: [
    {
      path: '/profile', component: Profile}
  ]
})

• 传递的方式: 对象中使用query的key作为传递方式
• 传递后形成的路径: /router?id=123, /router?id=abc

---

三、具体的使用方法

如何使用它们呢? 有两种方式: 的方式和JavaScript代码方式

1、 的方式

<router-link :to='"/user/" + id'>用户router-link>
<router-link :to="{path:'/profile',query:{name:'webchang',age:18}}">档案router-link>

2、JavaScript代码方式

//...
<template>
  <div id="app">
	<button @click="userClick">用户</button>
	<button @click="profileClick">档案</button>
  </div>
</template>

<script>
  export default {
     
    name: 'App',
    data() {
     
      return {
     
        id: 3
      }
    },
    methods: {
     
      userClick() {
     
        this.$router.push('/user/' + this.id)
      },
      profileClick() {
     
        this.$router.push({
     
          path: '/profile',
          query: {
     
            name: 'webchang',
            age: 18
          }
        })
      }
    }
  }
</script>

获取参数通过 $route 对象获取的。在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新，this.$route 指向当前处于活跃状态的路由对象。

我们可以在每个组件内使用 this.$route.params 拿到使用冒号 : 标记的“路径参数”，如 this.$route.params.id

使用 this.$route.query 拿到使用query方式传递的参数，如 this.$route.query.name