this.$route.params与this.$route.query的用法
时间: 2023-09-30 10:08:17 浏览: 254
在Vue.js中,`this.$route.params`和`this.$route.query`是两种获取路由参数的不同方式。
`this.$route.params`是一个对象,包含了当前路由中的动态路由参数。例如,如果你有一个路由为`/user/:id`,那么你可以通过`this.$route.params.id`来获取当前的`id`。
`this.$route.query`也是一个对象,包含了当前路由中的查询参数。例如,如果你有一个路由为`/user?id=123`,那么你可以通过`this.$route.query.id`来获取当前的`id`。
需要注意的是,动态路由参数和查询参数可以同时存在于同一个路由中。例如,一个路由为`/user/:id?name=John`,那么你可以通过`this.$route.params.id`和`this.$route.query.name`来获取它们的值。
总之,`this.$route.params`和`this.$route.query`都是非常方便的获取路由参数的方法,你可以根据自己的需求选择其中的一种或两种同时使用。
相关问题
// 接收路由跳转传来的id getId() { this.id = this.$route.query.id }, // 获取新的页数 getNewPage(val) { this.currentPage = val }, // 分页获取帖子 getArticleByPage() { var params = { currentPage: this.currentPage, pageSize: this.pagesize, categoryId: this.$route.query.id, source: this.source, parameter: this.parameter } getArticlePage(params).then((res) => { }) },将这三段代码改写到一个async和await函数中
您可以将这三段代码重写为一个使用 async/await 的函数,如下所示:
```javascript
async fetchData() {
try {
// 接收路由跳转传来的id
this.id = this.$route.query.id;
// 获取新的页数
this.currentPage = await this.getNewPageValue();
// 分页获取帖子
var params = {
currentPage: this.currentPage,
pageSize: this.pagesize,
categoryId: this.$route.query.id,
source: this.source,
parameter: this.parameter,
};
await this.getArticlePageData(params);
} catch (error) {
console.error(error);
}
},
async getNewPageValue() {
return new Promise((resolve, reject) => {
resolve(val);
});
},
async getArticlePageData(params) {
try {
await getArticlePage(params);
} catch (error) {
console.error(error);
}
}
```
请注意,为了使这段代码完整,我假设 `getNewPage` 方法返回一个 Promise,并且 `getArticlePage` 是一个异步函数,返回一个 Promise。您需要根据实际情况进行调整和修改。
this.$router和this.$route
this.$router 是 Vue Router 实例,它用于进行路由导航。它提供了一些方法,比如 `push` 和 `replace`,用于在应用程序中进行编程式导航。
this.$route 是当前活动路由的信息对象。它包含了当前路由的路径、参数、查询参数等信息。通过 this.$route,你可以访问当前路由的各种属性,比如 `path`、`params` 和 `query`。
阅读全文