Vue-Router (Nota)

Ver-Router

enrutador-link añadido automáticamente clase emparejado con éxito .router-link-activo

vista de enrutador

• Obtener enrutamiento dinámico por valor en este. $ Route.params
• adquisición consulta por valor en este. $ route.query
• ruta de navegación programática
  • . Este router.push $ ({ruta: '/'})
  • Nombrar la ruta, al agregar configurar el nombre de ruta, el uso de este salto es $ router.push ({nombre: ''}).
  • El valor predeterminado es de hash, si quiere cambiar la historia, el modo de añadir en el momento de creación de instancias VueRouter: 'historia'
  • En la navegación programática Si una ruta, params fallan , puede utilizar rutas llamada o escribir la ruta completa
  • esto. $ router.replace ser reemplazado
  • esto. $ router.go
• enrutamiento anidada
  • Al configurar el enrutamiento hijos añadir a una matriz, entonces se puede continuar con la configuración de enrutamiento
• Cuando la ruta del directorio / usuario / foo Vaya a la / usuario / bar, se volverá a utilizar los componentes, es decir, la función de enlace vida de los componentes no será llamado , puede supervisar $routelos cambios que se pueden utilizar beforeRouteUpdatepara navegar guardia

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

• Cuando la pluralidad de búsqueda de la misma ruta de encaminamiento, la primera a la más alta prioridad partido que (con la misma Reaccionar-router, interruptor)
• Cuando se utiliza la coincidencia de comodines, $ route.params añadirán valor a partido pathMatch
• A veces necesitan múltiples puntos de vista, en lugar de una única salida, se puede añadir un nombre de vista llamado, no por defecto

<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>

Una pluralidad de puntos de vista necesario el uso de una pluralidad de conjuntos

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

• vistas con nombre anidados (ignorando el enrutamiento anidada)

<!-- 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
    }
  }]
}

• ruta de redirección, rutas con nombre, o incluso como un método

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

• Alias ​​pueden ser especificados por Alias ​​(cuando se accede a / b con un acceso / a como)

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

• Parámetro que pasa componente de enrutamiento, el enrutamiento apoyos previstos paso de parámetros, si el nombre de vista, entonces sería añadir atributo apoyos para cada vista (en el conjunto para ser recibido)
  1. Modo de Boole, params será pasado como una propiedad
  2. modelo de atributos de objeto como tal, como un componente
  3. Modo de funcionamiento, la ruta de datos de retorno que recibe

vue-enrutador Adv.

• guardia frente global

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

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

Antes de que el gatillo de salto debe llamar al método siguiente , siguiente (false) interrumpir la navegación actual, siguiente ( '/') o siguiente ({ruta: '/' }) y similares, la navegación actual se interrumpe, una nueva navegación, junto (error) se hace pasar a una instancia de error, la navegación se termina, se pasará el error a la route.onError de devolución de llamada registrada ()

• guardia analítica mundial

la autorización para uso router.beforeResolve y beforeeach similares, (realizar este guardia de navegación se confirma) antes de confirmar la navegación, vigilado en todos los componentes y conjuntos que resolverse después de que el enrutamiento asíncrono

• gancho trasero mundial

Uso router.afterEach () para crear un mundial, no acepta el siguiente cambio de la navegación en sí

• También se puede definir directamente guardia beforeEnter de la configuración de enrutamiento

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

• Dentro de los guardias de ensamblaje

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`
  }
}

• proceso de resolución de navegación

1. La navegación se dispara.
2. En la inactivación de los componentes en la llamada a salir de la guardia.
3. Llamado Mundial beforeEachguardia.
4. En los componentes reutilizables en la llamada beforeRouteUpdateguardia (2.2 +).
5. Enrutamiento de llamadas dentro de la configuración beforeEnter.
6. Resolver componentes de enrutamiento asíncronos.
7. Pide al interior de los componentes activados beforeRouteEnter.
8. Llamado Mundial beforeResolveguardia (2.5+).
9. La navegación se confirmó.
10. Llamar al mundial afterEachgancho.
11. DOM desencadenó actualización.
12. Crear un buen ejemplo llamando a beforeRouteEnterlos guardias pasaron en nextla función de devolución de llamada.

• Enrutamiento puede añadir campos de metadatos, como la ruta de la meta-información ( autenticación de inicio de sesión puede ser utilizado para hacer esto )
• Enrutamiento componentes al uso excesivo de transición
• La adquisición de datos se puede crear en el ciclo de vida de un gancho o beforeRouteEnter
• instancia router puede añadir scrollBehavior definir el desplazamiento comportamiento, posición de retorno de desplazamiento que desea alcanzar, también puede devolver una promesa para lograr el objetivo de rodadura asíncrono
• Enrutamiento de carga diferida

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

A veces, todos los componentes necesarios en un recorrido lleno en el mismo bloque asíncrono, se puede usar un comentario especial de notación de sintaxis

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

marco de interfaz de usuario (Github encontrados)

• Basado elemento-ui extremo trama UI Vue PC
• marco mintUi interfaz de usuario basada en el extremo móvil

Algunos no entienden, en el punto de vista de demostración github

• Los componentes pueden ser introducidos en la demanda (reducción de volumen), si es necesario con no más