Navegação em vue

Navegação em vue

Declarativo	programático
roteador-link para=" "	this.$router.push()

Navegação Programática—Valor do Passe de Rota

1. salto de caminho, você só pode usar a consulta para passar parâmetros e os parâmetros serão exibidos na barra de endereço

this.$router.push({
     path : '/main',
     query : {
         userName : this.ruleForm.name
    }
 })


 跳转到的页面（获取参数的页面）：
{
   
   {this.$route.query.userName}}

2. Salto de nome, você pode usar consulta ou parâmetros

this.$router.push({
    
    
	name : 'Goodslist',
    query :{
    
    
         kw :item
    }
})


跳转到的页面：
{
    
    {
    
    this.$route.query.kw}}

this.$router.push({
    
    
	name : 'Goodslist',
    params : {
    
    
         kw : item
    }
})


跳转到的页面：
{
    
    {
    
    this.$route.params.kw}}

rotas aninhadas

Por que você precisa de rotas aninhadas

• A interface do aplicativo na vida real geralmente é composta de componentes aninhados de várias camadas. Da mesma forma, cada segmento do caminho dinâmico na URL também corresponde a cada camada de componentes aninhados de acordo com uma determinada estrutura
• Se você precisar alterar dinamicamente o conteúdo de uma determinada parte de um componente, precisará adicionar roteamento aninhado
• Porque queremos que o componente correspondente à rota correspondente apareça em algum lugar dentro de um componente, em vez de cobrir a página atual

Como adicionar configuração para rotas aninhadas

• Definido por crianças
• Detalhes: Não adicione / no valor do caminho da rota aninhada, caso contrário, destruirá o nível da rota atual

Perceba o salto do roteamento aninhado

• No passado, os saltos de roteamento eram implementados por meio de roteador-link – navegação declarativa
• Agora precisamos pular o código js – navegação programática