vue3 获取 URL 路由参数

2023年12月6日 1644点热度 0人点赞 0条评论
内容纲要

首先在 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' } });  

痴者工良

高级程序员劝退师

文章评论