vue3 Router 点击index中的按钮，查看相应的详情信息，并且传递id，及其路由的定义方法。

1、路由的定义

结构如下:

2、路由定义代码：

 {
      path: 'tabs',
      name: 'TabsDemo',
      component: () => import('@/views/demo/feat/tabs/index.vue'),
      meta: {
        title: t('routes.demo.feat.tabs'),
        hideChildrenInMenu: true,
      },
      children: [
        {
          path: 'detail/:id',
          name: 'TabDetail',
          component: () => import('@/views/demo/feat/tabs/TabDetail.vue'),
          meta: {
            currentActiveMenu: '/feat/tabs',
            title: t('routes.demo.feat.tabDetail'),
            hideMenu: true,
            dynamicLevel: 3,
            realPath: '/feat/tabs/detail',
          },
        },
      ],
    },

3、说明：

path：这个指定了访问时的路径

其实path: 'detail/:id' ，这个转到详情页以后，会传递一个id值。

component：这个指定的实际的文件的路径，这个一定要真实存在的vue文件的路径。

hideMenu：true 表示初始加载的时候不显示，只要点了按钮才会显示出来

import { useGo } from '@/hooks/web/usePage';

const go = useGo();

function toDetail(index: number) {
    go(`/feat/tabs/detail/${index}`);
  }

原生：

import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/pathName')

上面的go代码等价于：

import { useRouter } from 'vue-router';
const router = useRouter();
function toDetail(index: number) {
    router.push(path: `/feat/tabs/detail/${index}`);
  }

官网的简单路由：

https://cn.vuejs.org/guide/scaling-up/routing.html

4、获取id值：

<template>
  <PageWrapper title="Tab详情页面">
    <div>{{ index }} - 详情页内容在此</div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { PageWrapper } from '@/components/Page';
  import { useTabs } from '@/hooks/web/useTabs';
  import { useRoute } from 'vue-router';

  defineOptions({ name: 'TabDetail' });

  const route = useRoute();
  const index = route.params?.id ?? -1;
  const { setTitle } = useTabs();

  // 设置标识
  setTitle(`No.${index} - 详情信息`);
</script>

useRoute()获取相应参数的方法。