Vue Academy · Oppitunti

Vue Routerin käyttöönotto

Asentakaa Vue Router ja määritelkää ensimmäiset reittinne

Oppitunti 1/313 vaihetta

Vue Routerin käyttöönotto on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Mikä on Vue Router?

Vue Router on Vuen virallinen reitityskirjasto.

Yhdistää URL-osoitteet komponentteihin
Mahdollistaa yksisivuisen navigoinnin ilman koko sivun uudelleenlatausta
Hallinnoi historiaa, linkkejä ja parametreja

Vue Routerin asentaminen

Lisätkää Vue Router projektiinne npm:n avulla.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Reittikomponenttien luominen

Jokainen reitti näyttää komponentin. Aloittakaa yksinkertaisista sivukomponenteista.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

routes-taulukon määrittäminen

routes-taulukko yhdistää polut komponentteihin.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

createRouter-funktio luo reitittimen reiteistä ja historiatilasta.

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

createWebHistory käyttää HTML5 History APIa siistien URL-osoitteiden, kuten /about, luomiseen.

URL-osoitteessa ei ole hash-merkkiä
Palvelimen määritykset ovat tarpeen, jotta suorat linkit toimivat
Vaihtoehtona on createWebHashHistory (/#/about)

Reitittimen rekisteröiminen

Asentakaa reititin sovellukseen app.use-funktion avulla.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

router-view

router-view-komponentti on kohta, jossa täsmäävän reitin komponentti näytetään.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

Käyttäkää navigointiin tavallisten ankkurielementtien sijaan router-link-komponenttia. Se välttää koko sivun uudelleenlataukset.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

Aktiivisen linkin tyylittely

router-link lisää aktiiviseen linkkiin automaattisesti CSS-luokat.

router-link-active osittaisille täsmäyksille
router-link-exact-active tarkoille täsmäyksille

Tyylitelkää näillä luokilla nykyinen sivu korostetuksi.

Kokonaisuuden kokoaminen

Koko työnkulku:

Määritelkää reitit, jotka yhdistävät polut komponentteihin
Luokaa reititin createRouter- ja createWebHistory-funktioilla
Rekisteröikää se app.use(router)-kutsulla
Sijoittakaa router-view ja navigoikaa router-linkillä

Pikatesti

Testatkaa, miten hyvin ymmärrätte Vue Routerin määritykset.

Vastaa interaktiivisessa oppitunnissa

Kertaus: Vue Routerin käyttöönotto

Otitte käyttöön asiakaspuolen reitityksen:

Asentakaa se komennolla npm install vue-router
Määritelkää routes-taulukko
Käyttäkää createRouter- ja createWebHistory-funktioita
Rekisteröikää reititin kutsulla app.use(router)
Käyttäkää router-view- ja router-link-komponentteja

Seuraavaksi: sisäkkäiset ja dynaamiset reitit.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Vue Routerin käyttöönotto” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Vue Routerin käyttöönotto”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”Vue Routerin käyttöönotto”?

Asentakaa Vue Router ja määritelkää ensimmäiset reittinne Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.

Kuinka kauan ”Vue Routerin käyttöönotto”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vue Academy