Как включить параметр маршрута в адрес компонента в Vue? - PullRequest
Новая
       2

Как включить параметр маршрута в адрес компонента в Vue?

0 голосов
/ 30 марта 2020

У меня есть компоненты в нескольких папках. Допустим, у меня есть: 

.components
..folder1
...component1.vue
...component2.vue
..folder2
...component1.vue
...component2.vue

Я бы хотел, чтобы мое приложение осуществляло динамический поиск компонентов в зависимости от маршрута, например: 

{ path: '/component1/:typeOfComponent/:param', component: () => import('./components/' + $route.params.typeOfComponent + '/component1.vue') }

Я знаю, что могу пропустить все реквизиты (это работает правильно), но я бы хотел получить хороший компонент напрямую с маршрутизацией. Есть ли способ сделать это?

Заранее спасибо :)

1 Ответ

2 голосов
/ 30 марта 2020

Вы можете использовать компонент Dynami c в сочетании с параметрами маршрута.

ваши компоненты каталог :

  1. / components / ComponentOne. vue
  2. / компоненты / ComponentTwo. vue

ваш маршрутизатор 

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  { // this route will receive a component name as a parameter
    path: "/about/:component",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
    params: true
  }
];

В ваших представлениях / О программе. vue

<template>
  <div class="about">
    <h1>This is About Page</h1>
    <component :is="$route.params.component"></component>
  </div>
</template>

<script>
// @ is an alias to /src

import ComponentOne from "@/components/ComponentOne.vue";
import ComponentTwo from "@/components/ComponentTwo.vue";

export default {
  name: "Home",
  components: {
    ComponentOne,
    ComponentTwo
  }
};
</script>

при переходе по URL: 8080/about/ComponentTwo на странице about будет отображаться componentTwo.vue

Если вы не хотите импортировать каждый компонент

Один из вариантов - создать файл src/globalComponent.js и импортировать все глобальные компоненты в этом файле. 

import Vue from "vue";

Vue.component("ComponentOne", () => import("@/components/ComponentOne.vue"));
Vue.component("ComponentTwo", () => import("@/components/ComponentTwo.vue"));

, а затем импортировать в src/main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

import "./globalComponents";

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
...