Как можно описать маппинг роута на ссылку, в которой последний параметр может меняться.
{ path: '/user/{id}', //изменчивый параметр id
name: 'Profile',
component: Profile }
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВы можете использовать во vue-router динамический сегмент в маршруте, чтобы настроить динамический путь, например:
{ path: '/user/:id', component: Profile, name: 'user-id' }
Динамический сегмент обозначается двоеточием [ : ].
Теперь все URL вида /user/foo
и /user/bar
будут соответствовать одному маршруту.
При сопоставлении маршрута таким образом, значение динамического сегмента (id
) можно получить через this.$route.params
в каждом сопоставленном компоненте.
Более подробно об этом: Динамические пути во vue-router
Практический пример:
const Profile = {
template: '<div><h1>Профиль</h1> {{ $route.params.id }} <h3>Полный путь</h3> {{$route.path}}</div>'
}
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: Profile,
name: 'user-id'
}]
})
new Vue({
router,
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@2.8.0/dist/vue-router.js"></script>
<div id="app">
<ul>
<li v-for="user in ['victor', 'ivan', 'sergey']" :key='user'>
<router-link :to="{ name: 'user-id', params: { id: user } }"> {{user}} </router-link>
</li>
</ul>
<router-view></router-view>
</div>