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

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

stylowanie i klasy

vue-router dodaje klasy do aktywnego linku:

#vue

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.