this.$route.query在data里面获取参数跟在created里面获取参数有啥区别。
时间: 2024-04-18 12:27:37 浏览: 166
在Vue.js中,this.$route.query用于获取路由中的查询参数。这个属性可以在组件的data选项中或created生命周期钩子中进行访问。
当你将查询参数存储在组件的data选项中时,它们会成为响应式的数据,这意味着当查询参数发生变化时,组件会自动更新。你可以在模板中直接使用这些数据。
而在created生命周期钩子中获取查询参数,你可以在组件实例创建后立即访问它们。但是,这些参数不会自动地成为响应式数据,如果你想在模板中使用它们,你需要手动将它们存储在组件的data选项中。
因此,区别在于this.$route.query在data选项中获取参数可以实现响应式更新,而在created生命周期钩子中获取参数则需要手动更新组件的数据。根据你的具体需求选择适合的方法。
相关问题
vue 深度监听 this.$route.query
Vue 中深度监听 `this.$route.query` 可以用于实时获取路由查询参数的变化,并作出相应的处理。通常,你可以通过设置一个响应式数据来实现这个功能,比如使用 Vue 的 `watch` 或者第三方库如 `vue-watch-component`。
在 `methods` 或 `created` 生命周期钩子里,可以这样做:
```javascript
export default {
data() {
return {
queryParams: {}
}
},
created() {
// 使用 watch 监听 $route.query 的变化
this.watchRouteQuery();
},
methods: {
watchRouteQuery() {
this.$watch('$route.query', (newVal) => {
this.queryParams = newVal; // 更新本地的数据副本
}, { deep: true }); // 设置 deep 参数为 true,表示对嵌套的对象或数组也进行监听
}
},
// 其他生命周期钩子或业务逻辑...
}
```
当你需要监听路由查询参数时,只需要调用 `this.watchRouteQuery()` 即可。每当 `$route.query` 发生改变时,会自动更新 `queryParams` 对象。
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等待异步操作完成。
阅读全文