Vue3 Router问题：跳转传递的Params始终为空的原因排查

你组件里的to一直是undefined，主要是两个原因：

1. Vue Router的params有使用限制：
   只有当路由的path里定义了动态参数（比如/forbidden/:to）时，通过name跳转传的params才会被存到route.params里。你的/forbidden路由path是固定的，没设动态参数，所以你传的params: { to: ... }根本没被放进route.params里。

2. 你的props转换函数只拿了route.params：
   useRouteParamsAsProperties只返回route.params里的内容，但刚才说的to根本不在这，组件自然拿不到。

有两种方案可选：

方案一：给路由加动态参数 #

1. 改/forbidden的路由配置，在path里加可选动态参数:to?（?表示这个参数可传可不传）：

{
    path: '/forbidden/:to?',
    name: '/forbidden',
    props: useRouteParamsAsProperties,
    component: () => import('@views/forbidden/index.vue'),
},

2. 导航守卫的代码不用改，现在params里的to会被存到route.params里，组件就能拿到to属性了。

方案二：改用query传参数（不用改路由path） #

1. 把导航守卫里的params换成query：

export function useNavigationGuard() {
    return async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
        const canNavigate = false;
        if (!canNavigate) {
            console.log('forbidden');
            // 换成query传参数
            return next({ name: '/forbidden', query: { to: to.fullPath } });
        }
        return next();
    };
}

2. 改useRouteParamsAsProperties，把query里的参数也合并进去：

import { RouteLocationNormalized } from 'vue-router';

export function useRouteParamsAsProperties(route: RouteLocationNormalized) {
    const { params, query } = route;
    return {
        ...params,
        ...query, // 把query参数也加到props里
    };
}
export default useRouteParamsAsProperties;

这样组件里的componentProperties.to就能正常拿到值了。

内容的提问来源于stack exchange，提问作者Vinicius Andrade