Vue Router

Vue Router — официальная библиотека маршрутизации для VueJS. Позволяет легко создавать SPA приложения. Более подробно тут.

  1. Добавляем компонент router-link в App.vue
app.vue
<template>
  <div id="app">
	<!-- используем компонент router-link для навигации -->
 	<router-link to="/node">Node</router-link>
    <router-link to="/location">Location</router-link>
	  
	<!-- отображаем тут компонент, для которого совпадает маршрут -->
    <router-view></router-view>

  </div>
</template>

2. В main.js

main.js
// Импортируем Vue, VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router';

//Импортируем компоненты 
import App from './App.vue'
import Node from './components/Node.vue';
import Location from './components/Location.vue';

//Вызываем VueRouter
Vue.use(VueRouter);


//Определяем маршруты, где каждый маршрут должен указывать на компонент
const routes = [
  { path: '/node', component: Node },
  { path: '/location', component: Location }
]

//Создаем экземпляр маршрутизатора и передаем в качестве опций: mode, routes
const router = new VueRouter({ 
	mode: 'history', 	// Удаляет # из url
	routes: routes  	// Маршруты нашего SPA
});

// Монтируем корневой экземпляр приложения
new Vue({
  render: h => h(App),
  router

}).$mount('#app')

Внедрив маршрутизатор, мы получаем доступ к нему через this.$router, а так же к текущему маршруту: this.$route внутри любого компонента.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *