hookehuyr

成功案例和搜索功能路由调整

<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-12 13:39:46
* @LastEditTime: 2024-12-12 14:53:44
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -185,7 +185,7 @@ export default {
},
watch: {
// 监听路由参数变化时,更新输入框的值
'$route.query.keyword': function(newKeyword) {
'$route.params.keyword': function(newKeyword) {
this.keyword = newKeyword || '';
},
'$route' (to, from) {
......@@ -421,18 +421,14 @@ export default {
}
},
updateURL() {
const currentKeyword = this.$route.query.keyword;
const currentKeyword = this.$route.params.keyword;
// 如果输入的 keyword 和当前路由的 keyword 相同,不做更新
if (this.keyword === currentKeyword) return;
// 使用 Vue Router 动态更新 URL 中的 keyword 参数
this.$router.replace({
path: '/search', // 确保路径不变
query: {
...this.$route.query, // 保留其他可能存在的 query 参数
keyword: this.keyword // 更新 keyword 参数
}
path: `/search/${this.keyword}`
});
}
}
......
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-12 14:03:26
* @LastEditTime: 2024-12-12 14:54:14
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -78,7 +78,7 @@ export default [{
},
children: []
}, {
path: '/solution/case',
path: '/solution/case/:id/:current_index?',
name: '成功案例',
component: () => import('@/views/solution/case'),
meta: {
......@@ -232,7 +232,7 @@ export default [{
},
]
}, {
path: '/search',
path: '/search/:keyword?',
name: '搜索结果',
component: () => import('@/views/search'),
meta: {
......
<!--
* @Date: 2024-10-20 16:57:48
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-12 14:14:55
* @LastEditTime: 2024-12-12 14:54:04
* @FilePath: /hager/src/views/search.vue
* @Description: 文件描述
-->
......@@ -92,7 +92,7 @@ export default {
data () {
return {
activeName: 'product',
keyword: this.$route.query.keyword,
keyword: this.$route.params.keyword,
news_list: [],
case_list: [],
count_news: 0,
......@@ -110,7 +110,7 @@ export default {
}
},
watch: {
'$route.query.keyword': function(newKeyword, oldKeyword) {
'$route.params.keyword': function(newKeyword, oldKeyword) {
this.keyword = newKeyword || '';
if (newKeyword !== oldKeyword) { // 关键词变化时,重新搜索
this.activeName = 'product';
......@@ -258,10 +258,7 @@ export default {
},
goToSuccess (v) { // 跳转成功案例
this.$router.push({
path: '/solution/case',
query: {
id: v
}
path: `/solution/case/${v}}`,
});
}
}
......
<!--
* @Date: 2024-10-18 12:06:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-09 13:41:51
* @LastEditTime: 2024-12-12 14:26:37
* @FilePath: /hager/src/views/solution/case.vue
* @Description: 文件描述
-->
......@@ -157,7 +157,7 @@ export default {
},
computed: {
casePath () {
return `/solution/detail/${this.success_info.category_id}/${this.$route.query.current_index}/${Date.now()}`;
return `/solution/detail/${this.success_info.category_id}/${this.$route.params.current_index}/${Date.now()}`;
}
},
watch: {
......@@ -166,7 +166,7 @@ export default {
}
},
async mounted () {
const { code, data } = await getSolutionDetailAPI({ id: this.$route.query.id });
const { code, data } = await getSolutionDetailAPI({ id: this.$route.params.id });
if (code) {
this.success_info = data;
this.top_banner = this.success_info.file?.top_img ? this.success_info.file?.top_img[0]['value'] : '';
......
<!--
* @Date: 2024-09-29 15:49:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-12-12 14:21:31
* @LastEditTime: 2024-12-12 14:34:05
* @FilePath: /hager/src/views/solution/detail.vue
* @Description: 文件描述
-->
......@@ -255,11 +255,7 @@ export default {
},
goToCase (v) {
this.$router.push({
path: '/solution/case',
query: {
id: v.id,
current_index: this.current_index
}
path: `/solution/case/${v.id}/${this.current_index}`,
});
},
prevProductBtn () {
......