router传递params参数问题

Question

router不会传参数了，这是为什么，第一次遇到，不知道什么情况，哎呀，自己太笨了

这是为什么

import {useRouter} from 'vue-router'
const router=useRouter()

main.ts
import router from './router'
createApp(App).
use(createPinia).
use(router).
use(vant).mount('#app')

路由表

import {createRouter,createWebHistory,} from 'vue-router'

const routes=[
    {
        path:'/',
        component:()=>import('../views/home.vue')
    },
    {
        path:'/detail',
        component:()=>import('../views/detail.vue'),
        props:true,
    }
]

const router=createRouter({
    history:createWebHistory(),
    routes,
})

export default router

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在使用Vue Router时遇到了一个TypeScript错误，这个错误提示是因为在RouteLocationPathRaw类型中没有定义params属性。为了解决这个问题，你需要确保在路由配置中正确地指定了参数。同时，由于你在调用router.push时使用的参数格式不正确，也会导致问题。

首先，让我们确认一下你的路由配置是否正确。在你的Vue Router配置文件（通常是src/router/index.ts或index.js）中，你应该有一个类似这样的路由定义：

import Vue from 'vue';
import Router from 'vue-router';
import DetailComponent from '@/components/DetailComponent.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/detail/:id',
      name: 'detail',
      component: DetailComponent,
      props: true, // 这一行很重要，它告诉Vue Router将动态参数作为props传递给组件
    },
    // 其他路由...
  ],
});

接下来，当你尝试通过点击或其他事件触发导航时，确保使用正确的语法来传递参数。根据你的例子，应该这样调用router.push：

// 假设data是一个包含id的对象，例如：{ id: 123 }
const data = { id: 123 };
this.$router.push({ name: 'detail', params: { id: data.id } });

这段代码会导航到/detail/123，并将id作为参数传递给名为'detail'的路由。这会在目标组件中自动绑定为一个prop，你可以在组件内通过this.$route.params.id访问它。

如果你仍然遇到问题，请检查一下项目中的TypeScript配置，确保它与Vue Router版本兼容。此外，确保已经安装并导入了Vue Router的TypeScript类型定义。如果没有安装，可以使用以下命令安装：

npm install --save @types/vue-router

然后，在你的TypeScript文件顶部添加以下引用：

import 'vue-router/types/router';

按照这些步骤操作后，你应该能够成功传递参数并通过Vue Router导航。如果还有问题，请随时告诉我。