Vue-router (Nota)

Ver-Router

router-link adicionado automaticamente classe combinado com sucesso .router-link ativo

vista em router

• Obter roteamento dinâmico pelo valor neste. $ Route.params
• aquisição consulta por valor neste. $ route.query
• rota de navegação programático
  • . Presente $ router.push ({caminho: '/'})
  • Nomeando a rota, quando a adição de configure o nome da rota, o uso deste salto é de R $ router.push ({name: ''}).
  • O padrão é de hash, se você quiser mudar a história, o modo de adicionar no momento da VueRouter instanciação: 'história'
  • Na navegação programático Se um caminho, params falhar , você pode usar as rotas de chamada ou escreva o caminho completo
  • isso. $ router.replace ser substituído
  • isso. $ router.go
• roteamento nested
  • Ao configurar o encaminhamento Children Adicionar a uma matriz, em seguida, você pode continuar a configurar o roteamento
• Quando a rota a partir do / user / foo Navegue até o / user / bar, os componentes serão reutilizados, o que significa função de gancho vida útil dos componentes não será chamado , você pode monitorar $routemudanças que podem ser usados beforeRouteUpdatepara navegar guarda

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

• Quando a pluralidade de combinar o mesmo caminho de roteamento, o primeiro para o maior jogo de prioridade que (com o mesmo Reagir-router, Switch)
• Ao usar a correspondência de curinga, $ route.params irá agregar valor ao jogo pathMatch
• Às vezes precisa de vários pontos de vista, em vez de uma única tomada, você pode adicionar um nome vista nomeada, não padrão

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

Uma pluralidade de pontos de vista necessário o uso de uma pluralidade de conjuntos

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

• Aninhados vistas nomeadas (ignorando o encaminhamento aninhada)

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

• caminho de redirecionamento, rotas nomeadas, ou mesmo como um método

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

• Abreviaturas podem ser especificado por Alias ​​(quando acede a / b com um acesso / a como)

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

• Parâmetro passando componente de roteamento, os adereços fornecidos roteamento para passagem de parâmetros, se chamado vista, em seguida, que gostaria de acrescentar atributo adereços para cada vista (na assembléia a ser recebido)
  1. modo booleano, params será passado como uma propriedade
  2. atributos de modelo de objecto, como tal, como um componente
  3. modo de função, rota dados de retorno receber

vue-router Adv.

• guarda global Frente

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

Antes do gatilho salto deve chamar o método seguinte , ao lado (para falso) interromper a navegação atual, próxima ( '/') ou seguinte ({caminho: '/' }) e similares, a navegação actual é interrompida, uma nova navegação, próxima (erro) é passada uma instância de erro, a navegação é terminada, o erro será passado para o route.onError registrado callback ()

• guarda analítica global

registo de utilização router.beforeResolve e beforeEach semelhante (realizando, este guarda de navegação é confirmado) antes de confirmar a navegação, guardado em todas as componentes e conjuntos para ser resolvido após o encaminhamento assíncrono

• gancho traseiro global

Use router.afterEach () para criar um global, não aceitam a próxima mudança a própria navegação

• Ele também pode ser definida diretamente guarda beforeEnter na configuração de roteamento

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

• Dentro dos guardas de montagem

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
      可以给next传递回调，在确认时执行回调，组件实例作为回调的参数
      // next(vm => {
    // 通过 `vm` 访问组件实例
  })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

• processo de resolução de navegação

1. A navegação é acionado.
2. Na inativação de componentes na chamada para deixar o guarda.
3. Chamada Global beforeEachguarda.
4. Em componentes reutilizáveis em chamada beforeRouteUpdatede guarda (2.2 +).
5. Roteamento de chamadas dentro de configuração beforeEnter.
6. Resolver componentes de roteamento assíncronas.
7. Exorta a componentes dentro activado beforeRouteEnter.
8. Chamada Global beforeResolveguarda (2.5+).
9. A navegação é confirmada.
10. Ligue para o mundial afterEachgancho.
11. DOM desencadeada atualização.
12. Criar um bom exemplo chamando beforeRouteEnteros guardas passaram em nextfunção de retorno de chamada.

• Roteamento pode adicionar meta campos, como a rota meta-informação ( autenticação de login pode ser usado para fazer isso )
• Roteamento componentes para o uso excessivo de transição
• aquisição de dados podem ser criados no ciclo de vida de um gancho ou beforeRouteEnter
• instância Router pode adicionar scrollBehavior definir o comportamento de rolagem, posição de retorno de rolagem que você quer alcançar, você também pode retornar uma promessa para alcançar o rolamento assíncrona propósito
• Roteamento carregamento lento

const Foo = () => import('./Foo.vue')

Às vezes, todos os componentes necessários em uma rota embalado no mesmo bloco assíncrono, você pode usar um comentário especial Syntax Notation

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

quadro UI (Github Encontrado)

• Baseado elemento-ui quadro UI final Vue PC
• quadro mintUi UI baseada na final em movimento

Alguns não entendem, no ponto de vista github demonstração

• Os componentes podem ser introduzidos sob demanda (redução de volume), se necessário, com não mais