自存 vue路由通信

如图个人中心是一个大组件，个人文章，博客，关注，粉丝是一个小组件

点击的时候把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发送了变化，发送变化了就给搜索值复制然后查数据库赋值给新的文章值

大概效果就这样