As aplicações suportes usuário componentes com funções de roteamento em (clique) navegação, padrão prestados rótulo <a> com o link correto pode ser gerado por um outro atributo tag tag.
É essencialmente gerado por uma etiqueta ligada ao evento de clique, em seguida, executa a implementação correspondente impulso exemplo VueRouter (), por router-link montagem, você pode passar os adereços:
- para indicar a rota do destino da ligação, quando clicado, irá imediatamente dentro do valor para passar para router.push (), de modo que este valor pode ser uma string ou uma descrição da posição destino do objeto
- tag router-link nome de marca prestação componente, um padrão
- boolean exata "é ativado," de acordo com o nome da classe padrão está incluído jogo
- append tipo booleano, o conjunto de atributos de acréscimo, adicione grupo Road King antes da atual (relativo) Road King
- substituir tipo booleano, após configuração substituir, quando clicado, irá chamar router.replace () em vez router.push (), a história não vai deixar esse registro depois de navegação
- CSS nome de classe para uso quando ativado ligação activeClass
- configuração exactActiveClass quando o link é ativada deve corresponder exatamente a classe
- declaração de evento pode ser usado para eventos de navegação gatilho. Pode ser uma cadeia ou uma matriz de cadeias compreendendo
Para castanha:
escritor por: Desert QQ: 22969969
< Div id = "app" > < router-link para = "/ info / 1" >详情页1 </ router-link > < router-link para = "/ info / 2" evento "mouseover" = >详情页2 </ router-link > < router-link para = "/ info / 3" tag = "p" >详情页3 </ router-link > < hr /> < router-view > </ router-view > </ Div > < roteiro> Informações const = {template: ' <div> id: {{presente $ route.params.id}} </ div>. ' } Rotas const = [ {caminho: ' / informações /: id ' , componente: informação, nome: ' informações ' }, ] const app = new Vue ({ el: ' #app ' , router: nova VueRouter ({rotas}) }) </ roteiro>
Após a renderização DOM como segue:
Você pode ver o segundo componente routerlink prestados em p tag, quando clicamos o efeito é o seguinte:
Você pode ver detalhes na página 3 não clique, mova o mouse para cima, ele será automaticamente Interruptor de encaminhamento, e isso é porque nós somos introduzidos ao evento, no consolidado acima referido onmouseover evento.
roteador de ligação de montagem a partir de uma função de tornar definidos como se segue:
var link = { name: 'RouterLink' , adereços: { // 可以传入的adereços para: { Tipo: toTypes, necessários: verdadeiro }, tag: { type: String, padrão : 'a' }, exatas: booleano, append: booleano, substituir: booleano, activeClass: string, exactActiveClass: string, eventos: { tipo: eventTypes, padrão : 'clique' //默认为clique事件 } }, render: funçãorender (h) { // Router-Link montagem tornar função correspondente à função h na createElement igual a $ grande VUE var a esta $ 1 =. a esta ; var Router = a esta $ Router;. // Obter $ Router casos var Corrente = a esta $. rota; // encaminhamento actual objecto var REF = router.resolve ( a este .to, a corrente, a este .append); var LOCALIZAÇÃO = ref.location; // endereço para saltar, um objecto, por exemplo: {_ normalizada: a verdade, o caminho: "/ login", Inquérito: {...}, o hash: ""} var= Rota ref.route; // encaminhamento objecto var a href = ref.href; // O atributo href var classes de = {}; // este código e de configuração sobre linkActiveClass, linkExactActiveClass o var globalActiveClass = router.options.linkActiveClass; var globalExactActiveClass = router.options.linkExactActiveClass; // Active global Support classe vazia var activeClassFallback = globalActiveClass == nulo 'Active-Router-link'? : globalActiveClass; varexactActiveClassFallback = globalExactActiveClass == nulo ? 'router-link-exato-ativa' : globalExactActiveClass; var activeClass = esta == .activeClass nulo ? activeClassFallback : este .activeClass; var exactActiveClass = esta == .exactActiveClass nulo ? exactActiveClassFallback : este .exactActiveClass; var compareTarget = location.path ? createRoute ( nulo , localização, nulo , roteador) : rota; classes de [exactActiveClass] = isSameRoute (Current, compareTarget); classes de [activeClass] = a esta .exact ? Classes [exactActiveClass] : isIncludedRoute (atual, compareTarget); var Handler = função (E) { // evento Bind IF (guardEvent (e)) { // primeiro chamar a função de filtrar alguns dos eventos e de navegação não relacionada IF ( o presente $ 1.replace) { // Se você definir o substituir propriedade router.replace (localização); //Comutação é a navegação router.replace realizada } Else { router.push (localização); // então o router.push atualização de navegação } } }; var ON = {clique: guardEvent}; // <Router-Link> montagem apoiada por eventos padrão clique, o seguinte irá re oposto SE (Array.isArray ( a este .event)) { a esta .event.forEach ( função de (E) {ON [E] = Handler;}); } else { ON [ a esta .event] = Handler; } var dados = { //Em geral, há uma redefinição on.click Handler classe: aulas }; IF ( a este .tag === 'a') { // Se uma tag é um tag data.on = ON; data.attrs = { a href: a href}; } else { // Se o outro tag // Encontrar criança e aplicar o primeiro ouvinte <a> eo href var a = findAnchor ( a este .. $ ranhuras padrão ); // Localizar o primeiro <a> tag SE (A) { }// Se um tag for encontrado um // em um caso O estática <a> é o nó a.isStatic = false ; var o ADATA = a.data = Estender ({}, a.data); aData.on = ON; var = = a.data.attrs aAttrs Estender ({}, a.data.attrs); aAttrs.href = a href; } else { // Se uma marca não é encontrado // não têm ter <a> criança, ouvinte a Aplicar auto data.on = ON; // o próprio monitor return } H ( a este .tag, a Data, a este . $ Slots. Padrão ) // última chamada $ createElement para criar o vnode } }
Se uma etiqueta na função guardEvent executa preventDefault () função diz ao navegador para não executar uma ação associada ao evento, todas as ações como a definição do hash são alcançados pela VueRouter built-in de código.