VueJS - Roteamento
O VueJS não possui um recurso de roteador embutido. Precisamos seguir algumas etapas adicionais para instalá-lo.
Download direto do CDN
A última versão do vue-router está disponível em https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com fornece links cdn baseados em npm. O link acima é sempre atualizado para a versão mais recente. Podemos fazer o download e hospedá-lo e usá-lo com uma tag de script junto com vue.js da seguinte maneira -
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>Usando NPM
Execute o seguinte comando para instalar o vue-router.
npm install vue-routerUsando GitHub
Podemos clonar o repositório do GitHub da seguinte maneira -
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildVamos começar com um exemplo simples usando vue-router.js.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>Output
Para começar com o roteamento, precisamos adicionar o arquivo vue-router.js. Pegue o código dehttps://unpkg.com/vue-router/dist/vue-router.js e salve-o no arquivo vue-router.js.
O script é adicionado após vue.js da seguinte forma -
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>Na seção do corpo, há um link do roteador definido da seguinte maneira -
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p><router-link>é um componente usado para navegar até o conteúdo HTML a ser exibido ao usuário. A propriedade to é o destino, ou seja, o arquivo de origem onde o conteúdo a ser exibido será selecionado.
No trecho de código acima, criamos dois links de roteador.
Dê uma olhada na seção de script onde o roteador é inicializado. Existem duas constantes criadas da seguinte forma -
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }Eles têm modelos, que precisam ser mostrados quando o link do roteador é clicado.
Em seguida, é a const de rotas, que define o caminho a ser exibido na URL.
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];As rotas definem o caminho e o componente. O caminho, isto é/route1 será exibido no URL quando o usuário clicar no link do roteador.
O componente leva os nomes dos modelos a serem exibidos. O caminho das rotas deve corresponder ao link do roteador para a propriedade.
Por exemplo, <roteador-link to = ”path here”> </router-link>
Em seguida, a instância é criada para VueRouter usando o seguinte trecho de código.
const router = new VueRouter({
routes // short for `routes: routes`
});O construtor VueRouter usa as rotas como o parâmetro. O objeto roteador é atribuído à instância vue principal usando o seguinte trecho de código.
var vm = new Vue({
el: '#app',
router
});Execute o exemplo e veja a exibição no navegador. Ao inspecionar e verificar o link do roteador, descobriremos que ele adiciona classe ao elemento ativo, conforme mostrado na captura de tela a seguir.
A classe adicionada é class = “router-link-exact-active router-link-active”. O link ativo obtém a classe conforme mostrado na imagem acima. Outra coisa a notar é que o <router-link> é renderizado como uma tag.
Suportes para link de roteador
Vamos ver mais algumas propriedades a serem passadas para <router-link>.
para
Este é o caminho de destino fornecido para o <router-link>. Quando clicado, o valor de para será passado para router.push () internamente. O valor precisa ser uma string ou um objeto de localização. Ao usar um objeto, precisamos vinculá-lo conforme mostrado, por exemplo, 2.
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.A seguir está a saída de, por exemplo, 3.
No caminho do URL, name = Tery faz parte da string de consulta. Por exemplo: http: //localhost/vueexamples/vue_router.html#/route1? Name = Tery
substituir
Adicionar substituir ao link do roteador chamará o router.replace() ao invés de router.push(). Com substituir, o histórico de navegação não é armazenado.
Example
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>acrescentar
Adicionar append ao <router-link> <router-link> tornará o caminho relativo.
Se quisermos ir do link do roteador com caminho / rota1 para o caminho do link do roteador / rota2, ele mostrará o caminho no navegador como / rota1 / rota2.
Example
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>etiqueta
No momento, <router-link> é renderizado como uma tag. No caso, queremos renderizá-lo como alguma outra tag, precisamos especificar o mesmo usando tag = ”tagname”;
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Especificamos a tag como span e é isso que é exibido no navegador.
A tag exibida agora é uma tag span. Ainda veremos o clique acontecendo quando clicamos no link do roteador para navegação.
classe ativa
Por padrão, a classe ativa adicionada quando o link do roteador está ativo é o link do roteador ativo. Podemos sobrescrever a classe definindo o mesmo conforme mostrado no código a seguir.
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>A classe usada é active_class = ”_active”. Esta é a saída exibida no navegador.
classe ativa exata
A classe exata padrão aplicada é roteador-link-exato-ativo. Podemos sobrescrevê-lo usando classe ativa exata.
Example
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>Isso é o que é exibido no navegador.
evento
No momento, o evento padrão para o link do roteador é o evento de clique. Podemos alterar o mesmo usando a propriedade do evento.
Example
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>Agora, quando passarmos o mouse sobre o link do roteador, ele navegará conforme mostrado no navegador a seguir. Passe o mouse sobre o link 1 do roteador e veremos a mudança de navegação.
