Как в vue.js передать собственный путь в vue-router?

Пользователь

от narciso , в категории: JavaScript , 6 месяцев назад

Как в vue.js передать собственный путь в vue-router?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от nelle , 6 месяцев назад

@narciso 

Для того чтобы передать собственный путь в vue-router, вы можете использовать свойство path при определении маршрута.


Вот пример, который демонстрирует, как передать собственный путь в vue-router:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// в маршрутизаторе router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import MyComponent from '../views/MyComponent.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/my-path', // здесь вы передаете свой собственный путь
    name: 'MyComponent',
    component: MyComponent
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;


В этом примере мы передали собственный путь /my-path в качестве значения свойства path. При переходе по этому маршруту будет отображаться компонент MyComponent.


Вы также можете передать динамические параметры в свой путь, используя двоеточие перед именем параметра. Например:

1
2
3
4
5
{
  path: '/users/:id',
  name: 'User',
  component: UserComponent
}


В этом примере путь /users/:id будет пропущен через параметр id, который вы можете использовать в компоненте UserComponent.