vue3 获取 URL 路由参数

首先在 router/index.ts 中创建对应的路由。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/datasource/:source?/:database?',
      name: 'dataSource',
      component: DataSource
    }
  ]
})

export default router

在 .vue 文件中引入：

import { useRoute,useRouter  } from 'vue-router';
// 用于识别路由
const route = useRoute();
// 用于跳转路由
const router = useRouter();

获取页面的路由参数：

        console.log("页面路由参数：");
        console.log(route.params);

当在页面使用打开 http://localhost:5173/aaa/bbb 时。
可以使用 route.params.source 和 route.params.database 获取导 params。
如果是 query 参数，可以使用 route.querys 获取。

如果用户点击了某个按钮，想在 url 中显示该地址，可以使用：

    router.push({ name: 'dataSource', params: { source: 'aaa',database:'bbb' } });