Согласно документации Vue Router - Выборка данных :
Иногда вам нужно получить данные с сервера, когда маршрут активирован.
Например, перед рендерингом профиля пользователя вам необходимо
получить данные пользователя с сервера. Мы можем достичь этого двумя
разными способами:
Выборка после навигации : сначала выполните навигацию и выберите
данные в хуке жизненного цикла входящего компонента.
Выборка перед навигацией : выберите данные перед навигацией по
маршруту, выполните навигацию после получения данных.
Технически оба варианта являются допустимыми - в конечном итоге это
зависит от того, к какому вы стремитесь.
Чтобы второй вариант работал, как следует нужно иметь ввиду как работают хуки beforeRouteEnter
и beforeRouteUpdate
Здесь об этом подробнее можно почитать.
beforeRouteEnter (to, from, next) {
// вызывается до подтверждения пути, соответствующего этому компоненту.
// НЕ ИМЕЕТ доступа к контексту экземпляра компонента `this`,
// так как к моменту вызова экземпляр ещё не создан!
},
beforeRouteUpdate (to, from, next) {
// вызывается когда маршрут, что рендерит этот компонент изменился,
// но этот компонент будет повторно использован в новом маршруте.
// Например, для маршрута с динамическими параметрами `/foo/:id`, когда мы
// перемещаемся между `/foo/1` и `/foo/2`, экземпляр того же компонента `Foo`
// будет использован повторно, и этот хук будет вызван когда это случится.
// Также имеется доступ в `this` к экземпляру компонента.
},
И рабочий пример (Vue, Vuex, Vue Router):
const UsersList = Vue.component('UsersList', {
template: `
<transition name="slide-fade" mode="out-in">
<router-view :key="$route.params.id"></router-view>
</transition>`
})
const User = Vue.component('User', {
template: `
<section v-if="user">
<h1>{{ user.name }}</h1>
<h3>{{ user.email }}</h3>
<p>{{ user.address.city }}/{{ user.address.street }}</p>
</section>
`,
computed: {
user() {
return this.$store.getters.getCurrentUser
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$store.dispatch('getUserFromApi', to.params.id)
})
},
beforeRouteUpdate(to, from, next) {
this.$store.commit('setUsers', null)
this.$store.dispatch('getUserFromApi', to.params.id)
next()
}
})
const E404 = Vue.component('E404', {
template: `
<section>
<h4>Error component</h4>
</section>
`
})
const routes = [{
path: '/',
redirect: {
name: 'userslist'
}
},
{
name: 'userslist',
path: '/userslist',
component: UsersList,
children: [{
name: 'user',
path: 'user:id',
component: User
}]
},
{
path: '*',
component: E404
}
]
const router = new VueRouter({
routes
})
const store = new Vuex.Store({
state: () => {
return {
users: null,
currentUser: null
}
},
getters: {
getCurrentUser: (state, getters) => {
return state.currentUser
}
},
mutations: {
setUsers(state, user) {
state.currentUser = user
}
},
actions: {
async getUserFromApi({
commit
}, id) {
await fetch('https://jsonplaceholder.typicode.com/users/' + id)
.then(response => response.json())
.then((user) => {
commit('setUsers', user)
})
}
}
})
const app = new Vue({
router,
store,
data: {
users: []
},
async created() {
await fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then((json) => {
this.users = json
})
}
}).$mount('#app')
.box {
overflow: hidden;
display: flex;
flex-direction: row;
}
hr {
background: #eee;
height: 1px;
border: 0;
}
.left {
max-width: 40%;
}
.right {
max-width: 60%;
}
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active до версии 2.1.8 */
{
transform: translateY(40px);
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>
<script src="https://unpkg.com/vue-router@2.8.0/dist/vue-router.js"></script>
<div id="app">
Текущий URL - <b>{{ $route.path }}</b>
<hr>
<div class="box">
<div class="left">
<ul>
<li v-for="(user,index) in users" :key="index">
<router-link :to="{
name: 'user',
params: {
id: user.id
}
}" tag="a">{{ user.name }}</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
</div>