Vue-router Seção 1 Introdução ao Vue-router

Vue-router Seção 1 Introdução ao Vue-router

---

Seção 1 Introdução ao roteador Vue

Introdução: Devido à falta de suporte ao roteamento no desenvolvimento do Vue, o funcionário adicionou o plug-in vue-router, que é muito importante no ambiente ecológico do Vue.No desenvolvimento real, enquanto uma página for escrita, o vue-router funcionará. Para aprender o vue-router, você precisa saber qual é o caminho aqui? O roteamento aqui não se refere ao roteador de hardware sobre o qual geralmente falamos: o roteamento aqui é o gerenciador de caminhos do SPA (aplicativo de página única) . Para os leigos, o vue-router é o sistema de gerenciamento de caminhos de links da WebApp .

Anteriormente, usamos <a></a>tags para escrever links, mas usamos o Vue para criar aplicativos de página única , o que equivale a apenas uma página index.html principal ; portanto, as <a></a>tags que você escreve não funcionam, você deve usar o vue- roteador para gerenciar.

Instale o vue-router

O vue-router é um pacote de plugins, portanto, precisamos usar o cnpm para instalar. Abra a ferramenta de linha de comando, digite o diretório do projeto, digite o seguinte comando:

npm install vue-router --save-dev

Se você optou por instalar o vue-router enquanto estiver usando o vue-cli, não há necessidade de repetir a instalação.

Interpretar o arquivo router / index.js

Usamos o vue-cli para produzir nossa estrutura de projeto, que pode ser encontrada no src/router/index.jsarquivo.Este arquivo é o arquivo principal de roteamento.Vamos interpretá-lo primeiro.

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import HelloWorld from '@/components/HelloWorld'  //引入根目录下的HelloWorld.vue组件

Vue.use(Router)   //Vue全局使用Router

export default new Router({
  routes: [                    //配置路由，这里是个数组
    {                          //每一个链接都是一个对象
      path: '/',               //链接路径
      name: 'HelloWorld',      //路由名称
      component: HelloWorld    //对应的组件模板
    }
  ]
})

De fato, apenas uma função é configurada nesse arquivo de roteamento, que é exibir o código de conteúdo no HelloWorld.vue ao entrar no projeto.

Adicionar uma rota e uma página Hi
Depois de familiarizado com o arquivo de roteamento principal, tentamos adicionar uma configuração de rota. Esperamos que http://localhost:8080/#/hiuma nova página apareça ao entrar na barra de endereços . Vamos dar uma olhada no efeito que queremos.

Siga os passos abaixo:

• No diretório src / components, crie um novo arquivo Hi.vue;
• Escrever o conteúdo, simplesmente, como disse antes, o arquivo consiste em três partes <template><script>e <style>. O arquivo é muito simples, basta imprimir uma frase.

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    name: 'Hi',
    data(){
        return {
            msg: 'Hi,I am Daisy'
        }
    }
}
</script>

<style scoped>

</style>

• Introdução aos componentes Hi: router/index.jsApresentamos os componentes Hi acima dos arquivos

import Hi from '@/components/Hi'

• Adicionar configuração de roteamento: Na router/index.jsmatriz de rotas [] do arquivo, adicione um novo objeto, o código é o seguinte:

{
     path: '/hi',
     name: 'Hi',
     component: Hi
}

Isso já pode adicionar uma nova página.
Nota: O nome do componente deve ser o mesmo que o nome após a importação; um é introduzir um registro para que a página possa ser exibida corretamente

Navegação de produção do link do roteador
Agora, alterando o endereço da string na barra de endereços, você pode alterar o conteúdo. O que precisamos é de um link de navegação decente na página ; podemos alterar o conteúdo da página enquanto clicarmos. <router-link>Os rótulos são necessários para criar links . Vamos primeiro ver sua sintaxe.

<router-link to="/">[显示字段]</router-link>

• para: caminho de navegação, preencha router/index.jso valor do caminho que você configurou no arquivo; se você quiser navegar para a página inicial padrão, basta escreverto="/"
• [Campo de exibição]: o nome da navegação que queremos exibir para o usuário, como a página de notícias da página inicial.

Para entender a sintaxe básica do roteador-link, adicionamos o seguinte código ao modelo no arquivo src / App.vue para obter a navegação

<p>导航：
	<router-link to="/">首页</router-link>
    <router-link to="/Hi">Hi页面</router-link>
</p>

Agora vamos visitar a página para visitar tem mais navegação: