Передача свойств компонентам маршрутов Vue.js с помощью Vue Router

Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

Vue Router - это URL-маршрутизатор, который сопоставляет URL-адреса с компонентами.

В этой статье мы рассмотрим, как передавать свойства для маршрутизации компонентов с помощью Vue Router.

Прохождение реквизита

Использование $route в нашем компоненте создает тесную связь между объектом $route и компонентом. Следовательно, он ограничивает гибкость компонента, поскольку его можно использовать только с определенными URL-адресами.

Мы можем отделить компонент от маршрутизатора, используя параметр props.

Например, вместо того, чтобы писать:

const User = { template: "<div>User {{ $route.params.id }}</div>" };
const routes = [
  {
    path: "/user/:id",
    component: User
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  el: "#app",
  router
});

Вместо этого мы пишем:

src/index.js :

const User = { template: "<div>User {{ id }}</div>" };
const routes = [
  {
    path: "/user/:id",
    component: User,
    props: true
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  el: "#app",
  router
});

src/index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Если у нас несколько router-views, то мы должны определить props для каждого следующим образом:

src/index.js :

const Foo = { props: ["id"], template: "<div>foo {{id}}</div>" };
const Bar = { props: ["id"], template: "<div>bar {{id}}</div>" };
const routes = [
  {
    path: "/:id",
    components: { default: Foo, bar: Bar },
    props: { default: true, bar: true }
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  el: "#app",
  router
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
      <router-view name="bar"></router-view>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Затем, когда мы переходим к /#/1, мы видим:

foo 1
bar 1

отображается.

Как мы видим, когда для props установлено значение true, тогда $route.params будет установлен в качестве свойств компонента.

Это упрощает тестирование, поскольку нам не нужно беспокоиться об объекте $route при тестировании.

Объектный режим

Мы можем установить свойство props для объекта. Это удобно для статических опор.

Например, мы можем сделать это следующим образом:

src/index.js :

const Foo = { props: ["id"], template: "<div>foo {{id}}</div>" };
const routes = [
  {
    path: "/foo",
    component: Foo,
    props: { id: 1 }
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  el: "#app",
  router
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Затем мы видим foo 1, когда переходим к /#/foo.

Функциональный режим

Мы можем передать функцию, которая возвращает реквизиты. Это позволяет нам делать с параметрами маршрута все, что мы хотим, прежде чем отправлять их компоненту в качестве свойств.

src/index.js :

const Foo = { props: ["idString"], template: "<div>foo {{idString}}</div>" };
const routes = [
  {
    path: "/foo/:id",
    component: Foo,
    props: route => ({ idString: `id ${route.params.id}` })
  }
];
const router = new VueRouter({
  routes
});
new Vue({
  el: "#app",
  router
});

index.html :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
      <router-view name="bar"></router-view>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

В приведенном выше коде мы устанавливаем функцию как свойство props, где мы вернули объект, который устанавливает для свойства idString значение `id ${route.params.id}`.

Затем наш Foo компонент принимает свойство idString вместо того, чтобы получать id прямо из параметра маршрута. Таким образом, перед параметром маршрута id, который мы передали, поскольку это то, что мы вернули, мы видим «id».

Итак, когда мы переходим к /#/foo/1, мы получаем foo id 1.

Заключение

Мы можем передать параметр маршрута компонентам в качестве свойств вместо получения параметров маршрута из объекта $route.

Это упрощает тестирование, а также делает компонент более гибким, поскольку он отделяет компонент от Vue Router.

Мы можем установить для свойства props значение true, чтобы передать параметр маршрута в качестве опоры. Для статических свойств мы можем установить объект как значение props.

Мы также можем установить его как функцию для управления параметром маршрута перед возвратом объекта, где значение будет отправлено в качестве реквизита компоненту и получено ключом возвращенного объекта в компоненте.

Передача свойств компонентам маршрутов Vue.js с помощью Vue Router

Прохождение реквизита

Объектный режим

Функциональный режим

Заключение

Вопросы по теме