Vue Router

Vue Router pozwala na wyświetlanie poszczególnych podstron aplikacji

osobny, dodatkowy package do Vue – vue-router

w pliku router/index.js zamieszczamy:

impor Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    }
  ]
})

użycie:

<router-link :to="{ name: 'About' }">About</router-link>

dzięki :to – pozwala na zmianę linku urla i odwoływanie się poprzez nazwę co daje wiekszą swobodę

obiekt watch – do obserwowania zmian w path

$router – trzyma całą historię navigacji

#/ – symbol przed linkiem

bez hasha – about
z hashem – #/about – nie wysyła zapytania do serwera tylko podaje swój komponent, aby nie było symbolu hasa w definicji Routera podajemy mode: 'history’

po deployu na środowisku produkcyjne trzeba zmienić by zachowanie było dalej poprawne

 

Route Guards

• beforeEnter – funkcja z trzema parametrami :
  • to – komponent do którego kierujemy
  • from – skąd kierujemy
  • next – funkcja co chcemy zrobić jako następny krok

//beforeEnter

beforeEnter: (to, from, next) => {
  if(to.params.name) {
    next()
  } else {
    next({ name: 'Welcome' })
  }
}

stylowanie i klasy

vue-router dodaje klasy do aktywnego linku:

• router-link-active – w urlu występuje scieżka do strony z linku, ale może być jako rodzic
• router-link-exact-active – jest to dokładnie to odwołanie na jakie wskazuje link