Vue-Router:Navigace v aplikacích Vue.js

Úvod

Vue-Router je balíček JavaScriptu, který vám umožňuje nastavit směrování pro jednostránkové aplikace (SPA).

SPA označuje webovou aplikaci, která obsluhuje pouze jeden index.html stránku a dynamicky vykresluje obsah, což je způsob, jakým se s největší pravděpodobností nastavují moderní rámce JavaScriptu, jako je React.js nebo Vue.js.

Proč používat Vue-Router?

Použití SPA má mnoho výhod, ale jednou z hlavních výhrad je, že všechny součásti webové stránky jsou dodávány, přidávány nebo odstraňovány pomocí JavaScriptu, aniž by se ze serveru načítaly žádné další stránky HTML. To je to, o čem jsou SPA, ale hlavním problémem je schopnost procházet "stránky", jak jsou uživatelé zvyklí u většiny webových stránek.

Zde je Vue-Router začíná!

Instalace a nastavení

Pokud používáte Vue CLI, možná jste se již setkali se situací, kdy jste byli dotázáni, zda chcete zahrnout Vue-Router do konfigurace projektu.

Vue-Router lze snadno nainstalovat pomocí vašeho preferovaného správce balíčků, ať už je to NPM nebo Příze :

$ npm install vue-router
OR
$ yarn add vue-router

Tím přidáte vue-router do vašeho package.json soubor a můžete začít.

Doporučuje se zapsat kód související se směrovačem do samostatného souboru s názvem router.js a přidejte jej do aplikace Vue uvnitř main.js soubor:

import Vue from 'vue'
import App from './App'
import Router from './router // Router being imported

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: Router, // Router added to the Vue instance
  components: { App },
  template: '<App/>'
})

Soubor router.js:Vytváření tras

Nejprve musíme importovat router z balíčku Vue-Router a přidejte jej do Vue jako plugin metodou use .

Poté se k routeru chováme jako k objektu, který pojme všechny trasy. A samozřejmě jej musíme exportovat, aby k němu měl přístup zbytek aplikace.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: []
})

routes property je pole, které bude obsahovat objekty, z nichž každý bude specifickou cestou pro vaši webovou stránku. Ten nejzákladnější by vypadal takto:

 const Home = { template: '<div>Welcome to Stack Abuse!</div>' }
 routes: [
   {
     path: '/',
     name: 'Home',
     component: Home
   }
 ]

Vue-Router přijímá velké množství vlastností pro směrované objekty:

• path :Toto je relativní cesta k základní trase vaší webové aplikace, kde chcete, aby byla určitá komponenta vykreslena.

• name :Vlastnost name bude užitečná při odkazování na tento konkrétní objekt uvnitř vašich komponent Vue.

• component :S touto vlastností bude komponenta Vue vložena do trasy, kterou přiřadíte.

• redirect :Trasa komponenty může být přesměrována na jinou trasu, když se shoduje.

• alias :Docela podobné přesměrování, ale kdykoli zadáte cestu aliasu, router zobrazí kořenovou cestu routeru.

const router = new VueRouter({
  routes: [
    { 
      path: '/users', 
      component: Users, 
      alias: '/alias' // When entering '/alias' the content of the component Users will render
    }
  ]
})

• children :Toto je pole s více cestami, které budou zřetězeny k cestě, zatímco nadřazená cesta zůstane v adrese URL.

const router = new VueRouter({
  routes: [
    { 
      path: '/users/', 
      component: Users,
      children: [
        {
          // when /users/profile gets matched
          path: 'profile',
          component: UserProfile
        },
        {
          // when /users/info gets matched
          path: 'info',
          component: UserInfo
        }
      ]
    }
  ]
})

• params :Toto jsou vlastnosti nebo určité informace, které mohou být předány komponentě.

• meta :Kdykoli trasa (nebo více tras) odpovídá cestě, bude k dispozici vlastnost meta. To je užitečné zejména při používání navigačních stráží.

Můžeme také přidat mode vlastnost na Router objekt. Ve výchozím nastavení je Vue-Router nastaven na hash režim, což znamená, že všechny adresy URL budou mít # na konci. To lze odstranit, jak pravděpodobně budete chtít, nastavením mode vlastnost na history :

export default new Router({  
  mode: 'history',
  routes: []
})

Tento režim však přichází s problémem. Bez správné konfigurace, přístup, například, http://localhost:8080/user/id , přímo v jejich prohlížeči se zobrazí 404 chyba.

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Chcete-li to vyřešit, musíte na svůj server přidat jednoduchou záložní trasu. Pokud cesta neodpovídá žádným statickým podkladům, měla by zobrazovat stejné index.html .

Pokud byste například chtěli nastavit režim historie na serveru Node.js, můžete to nastavit takto:

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

Přístup k routeru z komponenty

Vzhledem ke konkrétní komponentě můžete přistupovat k objektu routeru pomocí $ zápis, aby reagoval na vstup uživatele nebo byl schopen vykreslovat trasy v závislosti na určitých podmínkách.

Chcete-li, aby byly trasy Vue-Router vykresleny, budete muset předat <router-view> tag uvnitř komponenty Vue.

Můžete také přistupovat k trasám z <a> tag, ale to spustí opětovné vykreslení stránky. Chcete-li se tomuto chování vyhnout, můžete použít router-link s to vlastnost namísto href . Tato speciální značka říká routeru, aby přešel na danou "stránku".

<template>
  <div>
     <h3> Vue Router - Stack Abuse </h3>
     <h4> { $router.params.id } </h4>
     <button @click="goBack"> Go Back </button>
     <router-view></router-view>
     <router-link :to="/users"> Users Route </router-link>
  </div>
</template>

export default {
  methods: {
    goBack () {
       this.$router.go(-1)
    }
  }
}

K objektu routeru jsou připojeny určité metody, které vám pomohou přesměrovat vaši aplikaci na požadovanou adresu URL:

• $router.go() :Vezme číslo jako parametr, který odkazuje na počet pozic, o které se chcete posunout vpřed nebo za v poli zásobníku historie prohlížeče.

• $router.push() :Tato funkce může mít řetězec odkazující na název nebo cestu trasy, ke které chcete přistupovat, nebo na objekt s konfigurací trasy.

router.push(
  { 
    name: 'users'
    params: { id: 1 }
  }
)

• $router.replace() :Téměř stejné jako push, místo toho, kromě přidání nového záznamu do zásobníku historie prohlížeče, nahradí aktuální záznam tím, který přidáváme.

Strážci trasy

Většina aplikací potřebuje způsob, jak zakázat přístup k určitým trasám. To lze snadno provést pomocí strážců trasy, o kterých jsme hovořili dříve, když jsme mluvili o meta vlastnost.

Každá trasa má tok rozlišení navigace a existují určité háčky, které lze využít ve váš prospěch.

• beforeEach :Určitě nejužitečnější, když potřebujete globálního hlídače, aby se uživatelé nedostali do zakázaných oblastí, můžete nastavit funkci zpětného volání, která obdrží to , from , next z beforeEach funkce, která vás informuje o tom, odkud a kam navigujete, a také o dalším kroku:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.auth)) {
    if (!userIsLoggedIn)
      next('/')
      console.log('Not allowed here')
    } else {
      next('/secret-endpoint')
    }
  }
})

• beforeEnter :Spustí se předtím, než uživatel vstoupí na určitou trasu.

• afterEach :Volá se vždy, když byla navigace pro každou trasu úspěšná.

Závěr

Vue-Router je nezbytným nástrojem, pokud vytváříte jakoukoli jednostránkovou aplikaci Vue.js, poskytuje vám flexibilitu, abyste mohli plně spravovat navigaci uživatele.

Více informací můžete vždy získat na oficiální stránce Vue-Router.