vue路由传递参数如何接收

在Vue.js中，路由传递参数有两种主要方式：1、通过路径参数传递；2、通过查询参数传递。路径参数传递和查询参数传递的区别在于它们在URL中的位置和使用场景。下面将详细解释如何接收这两种参数，并提供实际代码示例。

一、通过路径参数传递

路径参数是指在路由路径中直接定义的参数，例如/user/:id中的:id。路径参数通常用于需要直接在URL中展示的参数，例如资源的唯一标识符。

定义路由

const routes = [
  { path: '/user/:id', component: User }
]

获取参数

在组件中，可以通过this.$route.params来获取路径参数。

export default {
  mounted() {
    console.log(this.$route.params.id);
  }
}

示例代码

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '@/components/User';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
});
// components/User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: this.$route.params.id
    };
  },
  watch: {
    '$route' (to, from) {
      this.userId = to.params.id;
    }
  }
}
</script>

二、通过查询参数传递

查询参数是指在URL中以?开头的参数，例如/user?id=123中的id=123。查询参数通常用于可选参数或筛选条件。

定义路由

const routes = [
  { path: '/user', component: User }
]

获取参数

在组件中，可以通过this.$route.query来获取查询参数。

export default {
  mounted() {
    console.log(this.$route.query.id);
  }
}

示例代码

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '@/components/User';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/user',
      name: 'User',
      component: User
    }
  ]
});
// components/User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: this.$route.query.id
    };
  },
  watch: {
    '$route' (to, from) {
      this.userId = to.query.id;
    }
  }
}
</script>

三、路径参数与查询参数的对比

项目	路径参数	查询参数
定义方式	在路径中直接定义	在路径后通过`?`和`&`定义
获取方式	`this.$route.params`	`this.$route.query`
使用场景	必须参数，例如资源ID	可选参数，例如筛选条件
URL示例	`/user/123`	`/user?id=123`
可读性	高	中
URL整洁性	中	高

四、结合使用路径参数和查询参数

有时，我们可能需要同时使用路径参数和查询参数。这种情况下，路径参数用于标识资源，而查询参数用于提供附加信息。

定义路由

const routes = [
  { path: '/user/:id', component: User }
]

获取参数

在组件中，可以同时获取路径参数和查询参数。

export default {
  mounted() {
    console.log(this.$route.params.id);
    console.log(this.$route.query.filter);
  }
}

示例代码

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import User from '@/components/User';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: User
    }
  ]
});
// components/User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
    <h2>Filter: {{ filter }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: this.$route.params.id,
      filter: this.$route.query.filter
    };
  },
  watch: {
    '$route' (to, from) {
      this.userId = to.params.id;
      this.filter = to.query.filter;
    }
  }
}
</script>

五、路径参数和查询参数的最佳实践

路径参数：
- 应用于资源标识符，例如用户ID、文章ID等。
- URL应保持简洁和可读。
查询参数：
- 用于可选参数和筛选条件，例如分页、排序等。
- URL中应尽量避免冗长和复杂的查询参数。
结合使用：
- 当需要同时传递资源标识符和附加信息时，可以结合使用路径参数和查询参数。
- 确保URL结构清晰，便于用户理解和使用。

总结

在Vue.js中，路由传递参数有两种主要方式：路径参数和查询参数。路径参数通常用于必须参数，如资源ID，获取方式为this.$route.params；查询参数通常用于可选参数或筛选条件，获取方式为this.$route.query。根据实际需求选择合适的参数传递方式，可以确保URL的简洁性和可读性。结合使用路径参数和查询参数时，注意保持URL结构清晰，便于用户理解和使用。通过以上方法和示例代码，你可以在Vue.js项目中灵活地传递和接收路由参数。