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()获取相应参数的方法。