前端通过methods: { handleView(id) { this.$router.push({ path: '/detail', query: { id }}) } }传递的参数怎么在详情页接收
时间: 2023-11-23 15:16:33 浏览: 29
在接收组件(例如Detail组件)中可以通过 `$route.query` 来获取通过路由传递的参数。
例如,在 Detail 组件中,可以通过以下方式获取传递的 id 参数:
```javascript
export default {
mounted() {
const id = this.$route.query.id;
console.log('接收到的id为:', id);
// 通过获取到的 id 参数,进行相应的操作
}
}
```
在上述代码中,`this.$route.query` 可以获取路由中通过 query 传递的参数,然后通过 `this.$route.query.id` 获取传递的 id 参数,进行相应的操作。
相关问题
methods: { // 按钮点击事件 显示新增编辑弹窗组件 show() { this.addOrUpdateVisible = true; }, showAddOrUpdate(data) { if (data === "false") { this.addOrUpdateVisible = false; } else { this.addOrUpdateVisible = true; } }, // 确认删除 handleConfirm() { var params = this.id deleteCategory(params).then((res) => { if (res.data.state === '200') { this.$router.push({ path: "/" }); } }) }, // 接收路由跳转传来的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) => { }) }, //路由跳转到帖子详情界面 Articli_detail(item) { this.$router.push({ path: "/articledetail", query: { id: item.id } }) }, // 置顶帖子 handleTop(item) { var params = { articleId: item.id, categoryId: this.$route.query.id, top: true } topArticle(params).then((res) => { }) }, }, watch: { currentPage() { this.getArticleByPage() } }, beforeCreated() { this.getNewPage() }, created() { this.getId() this.getArticleByPage() }, };请将代码用async和await改写
你可以使用async和await来改写这段代码。下面是改写后的代码:
```javascript
methods: {
show() {
this.addOrUpdateVisible = true;
},
showAddOrUpdate(data) {
if (data === "false") {
this.addOrUpdateVisible = false;
} else {
this.addOrUpdateVisible = true;
}
},
async handleConfirm() {
var params = this.id;
try {
const res = await deleteCategory(params);
if (res.data.state === '200') {
this.$router.push({ path: "/" });
}
} catch (error) {
console.error(error);
}
},
getId() {
this.id = this.$route.query.id;
},
getNewPage(val) {
this.currentPage = val;
},
async getArticleByPage() {
var params = {
currentPage: this.currentPage,
pageSize: this.pagesize,
categoryId: this.$route.query.id,
source: this.source,
parameter: this.parameter
};
try {
await getArticlePage(params);
} catch (error) {
console.error(error);
}
},
Articli_detail(item) {
this.$router.push({ path: "/articledetail", query: { id: item.id } });
},
async handleTop(item) {
var params = {
articleId: item.id,
categoryId: this.$route.query.id,
top: true
};
try {
await topArticle(params);
} catch (error) {
console.error(error);
}
}
},
watch: {
async currentPage() {
await this.getArticleByPage();
}
},
async beforeCreate() {
await this.getNewPage();
},
async created() {
await this.getId();
await this.getArticleByPage();
}
```
通过将异步操作使用async和await包裹,并使用try-catch语句处理错误,可以更清晰地编写异步代码。同时,将beforeCreated和created生命周期钩子函数声明为async,并使用await等待异步操作完成。
vue push怎么样用
在Vue中,可以使用`$router.push(location)`方法进行路由跳转。其中,`location`可以是一个字符串或一个描述地址的对象。
如果`location`是一个字符串,那么它应该是目标路由的路径,例如:
```javascript
this.$router.push('/home')
```
如果`location`是一个描述地址的对象,那么它应该包含以下属性之一:
- `path`:目标路由的路径
- `name`:目标路由的名称
- `params`:一个包含路由参数的对象
- `query`:一个包含查询参数的对象
例如:
```javascript
// 通过 path 跳转
this.$router.push({ path: '/home' })
// 通过 name 跳转
this.$router.push({ name: 'home' })
// 通过 params 跳转
this.$router.push({ path: '/user', params: { userId: '123' } })
// 通过 query 跳转
this.$router.push({ path: '/search', query: { keywords: 'vue' } })
```
值得注意的是,如果要在组件中使用`$router`对象,需要先在组件中注入`router`对象,例如:
```javascript
import { mapActions } from 'vuex'
export default {
// 注入路由器
inject: ['router'],
methods: {
...mapActions(['fetchData']),
// 跳转到详情页
goToDetail(id) {
this.router.push({ name: 'detail', params: { id } })
}
}
}
```