Ao utilizar o Vue Router para navegação entre rotas e passar valores como parâmetros (params), um comportamento peculiar ocorre quando o valor é null: ele é automaticamente convertido para a string literal "null" na página de destino.

Reprodução do Problema

Para demonstrar o problema, considere o seguinte código para iniciar a navegação com um parâmetro params definido como null:

this.$router.push({
  name: 'user',
  params: { userId: null }
});

A configuração da rota de destino é apresentada a seguir:

{
  path: '/user/:userId',
  name: 'user',
  component: UserPage
}

Após a navegação, a URL resultante se parecerá com:

/user/null

Na página de destino, ao acessar o parâmetro:

console.log(this.$route.params.userId); // Saída: "null" (string)

Como observado, o parâmetro que originalmente era null foi transformado em uma string "null".

Análise da Causa

1. Princípio de Design do Vue Router

O Vue Router é projetado para construir URLs a partir dos params fornecidos. Como as URLs são essencialmente sequências de caracteres, todos os valores passados para params são stringificados. Quando um valor null é encontrado, ele é convertido para a string "null". Em contraste, um valor undefined resultaria na omissão do parâmetro na URL.

2. Processamento da URL e Recepção na Página

Na página de destino, o Vue Router analisa a URL e reconstrói os params. Como a string "null" já está presente na URL, o valor recebido na página é, consequentemente, a string "null", e não o tipo de dado null original.

Soluções Possíveis

Solução 1: Utiliazr query em vez de params

Se a intenção é presrevar o tipo de dado original, a abordagem recomendada é utilizar os parâmetros de query em vez de params.

this.$router.push({
  name: 'user',
  query: { userId: null }
});

// Na página de destino:
console.log(this.$route.query.userId); // Saída: null

Os parâmetros de query mantêm o tipo de dado original sem sofrer stringificação.

Solução 2: Pré-processar o valor null antes da navegação

Outra alternativa é manipular o valor null antes de iniciar a navegação, substituindo-o por um valor como uma string vazia ou undefined. O tratamento posterior na página de destino seria necessário.

this.$router.push({
  name: 'user',
  params: { userId: null ?? '' } // Ou use undefined
});

No componente de destino:

const idFromParams = this.$route.params.userId;
const actualUserId = (idFromParams === '' || idFromParams === undefined) ? null : idFromParams;

Solução 3: Interpretar a string "null" na página de destino

Se for imperativo manter o uso de params, é possível realizar a conversão explícita na página de destino.

const idParam = this.$route.params.userId;
const actualUserId = (idParam === 'null') ? null : idParam;

Dessa forma, se o valor for a string "null", ele será convertido de volta para o tipo null.

Conclusão

A conversão de null para a string "null" ao usar params no Vue Router é uma consequência direta da forma como os parâmetros são stringificados para a construção da URL. Para evitar esse comportamento, pode-se optar por usar query ou implementar lógicas de tratamento tanto entes da navegação quanto ao receber os parâmetros.