如图个人中心是一个大组件,个人文章,博客,关注,粉丝是一个小组件
点击的时候把id传过来
这是路由
{
path: "/:id", name: "me", component: me,
redirect: { name: 'userartcle' },
children: [
// 搜索博客
{ path: "userBlog", name: 'userBlog', component: () => import('@/components/me/userBlog') },
// 搜索文章
{ path: "userartcle", name: "userartcle", component: () => import("@/components/me/userartcle") },
//关注&&粉丝
{ path: "userartcle", name: "search", component: () => import("@/components/me/usersearch") }
]
},
主页跳到详细页面时发送params请求匹配id
:to="{
name: 'me',
params: {
id: tokenstore.userId,
},
}"
好像从me这个路由跳转到对应的子路由不需要用params传递id,在子路由一样可以接受到
这是跳转到各个详细页面的函数
// 到博客
function toBlog() {
change.value = 2;
router.push({
name: "userBlog",
//不需要id
// params: {
// id: route.params.id,
// },
query: { keyword: search.value },
});
}
//到文章
function tome() {
change.value = 1;
router.push({
name: "userartcle",
// params: {
// id: route.params.id,
// },
query: { keyword: search.value },
});
}
//到关注
function toAttention() {
change.value = 3;
router.push({
name: "search",
query: { keyword: search.value,state:1 },
});
}
//到粉丝
function toFans() {
change.value = 4;
router.push({
name: "search",
// params: {
// id: route.params.id,
// },
query: { keyword: search.value,state:2 },
});
}
//在详细页面也是可以这样接收的
userId:route.params.id,
查询相关的东西都在都在子路由做,这样子
//搜索接口值列表
const data=ref({
//id
userId:route.params.id,
pageSize:pageSize.value,
pageNumber:pageNumber.value,
sortType:sortType.value,
style:'全部',
search:route.query.keyword
})
onBeforeMount(() => {
selectlist();
});
async function selectlist() {
//依次 用户id,查询数量,第几页,排序类型
artcles.value = (await selectArtcleByUser(data.value)).data;
//查询所有标签,赋值
classfy.value =await getClass();
}
关于搜索,搜索的组件是在父组件里面,然后我要搜索的是各个子路由的内容
这里我使用方法是点击搜索时在父路由发送query参数跳转到子路由,然后子路由监听query的变化,如果变化了就发送请求查询数据库
父路由
//搜索
function searchsth() {
if (change.value == 1) {
router.push({ name: "userartcle", query: { keyword: search.value } });
}
if (change.value == 2) {
router.push({ name: "userBlog", query: { keyword: search.value } });
}
if (change.value == 3 || change.value == 4) {
router.push({ name: "search", query: { keyword: search.value } });
}
}
根据change来判断你要跳转到那里去,然后传递的参数是搜索的值
子路由
watch(
() => route.query,
async (newQuery) => {
//给搜索值赋值
data.value.search=newQuery.keyword,
artcles.value = (await selectArtcleByUser(data.value)).data;
}
);
监听路由变化,如果父路由点击搜索了就代表route.query发送了变化,发送变化了就给搜索值复制然后查数据库赋值给新的文章值
大概效果就这样