Diretório de artigos
1. Crie componentes de roteamento
Explique o que é uma rota: uma rota é um conjunto de relacionamentos de mapeamento (chave - valor), onde a chave é um caminho e o valor pode ser uma função ou um componente.
Se você deseja usar o roteamento no vue2, precisa instalar um plug-in vue-router.
1.1 Instalar vue-router
Crie diretórios e componentes correspondentes
1.2 Configurar roteamento
As rotas configuradas no projeto geralmente são armazenadas na pasta do roteador
2. Usando o roteamento
Figura 1:
Figura II:
3. Salto de roteamento
A descrição acima é para alternar manualmente a rota por meio do URL. Isso definitivamente não é possível. Os usuários não conseguem entender essas coisas. Vamos dar uma olhada nos dois modos de salto da rota.
3.1 Navegação Declarativa
O primeiro tipo de salto de roteamento: navegação declarativa através do rótulo do link do roteador para salto de roteamento
3.2 Navegação programática
O primeiro tipo de salto de roteamento: navegação programática usa push | replace para salto de roteamento.
Em relação ao que a navegação declarativa pode fazer, a navegação programática também pode fazer. Em relação à navegação programática, além dos saltos de roteamento, você também pode fazer alguma outra lógica de negócios
4. Parâmetros de roteamento
Em relação aos parâmetros de roteamento, existem dois tipos de parâmetros
- Parâmetro params: Pertence a uma parte do caminho. Deve-se observar que ao configurar a rota, ele precisa ocupar um lugar
- parâmetro de consulta: não faz parte do caminho, semelhante a queryString em ajax,
/student?k=v&kv=não precisa passar parâmetros
4.1 Parâmetros de passagem de roteamento: formato de string
Figura 1:
Figura II:
Usando strings de modelo
Figura II:
Figura 3:
4.2 Parâmetros de passagem de roteamento: escrita de objetos
Figura 1:
Figura II:
Figura 3:
4.3 Perguntas da entrevista relacionadas aos parâmetros de roteamento
Tópico 1: O caminho pode ser usado em combinação com o parâmetro params para parâmetros de roteamento (gravação de objeto)?
Figura 1:
Figura II:
Questão 2: Como especificar se o parâmetro params pode ser passado ou não?
Figura 1:
Tópico 3: O parâmetro params pode ser passado ou não, mas como resolver se o passado for uma string vazia?
Tópico 4: Os componentes de roteamento podem passar dados props
Figura 1:
Figura II:
Figura 3:
Em relação aos parâmetros de passagem de props, em geral, é uma simplificação de obter parâmetros de params e parâmetros de consulta.
5. uso meta
Figura 1:
6. Reescreva os métodos push e replace
Tanto o push quanto o replace são usados pelo roteamento programático. Aqui, se o método push ou replace for executado várias vezes, um erro de aviso será NavigationDuplicatedlançado .
Demonstre:
Figura II:
Vamos resolver este problema:
Figura 1: Uma solução que trata os sintomas, mas não a causa raiz
Figura 2: solução completa
Na verdade, lidar ou não com esse problema tem pouco impacto no programa, mas como programador, é inevitável sentir um pouco de desconforto ao ver o vermelho.