Vue Material Drawer (как отобразить file.vue внутри md-контента) - PullRequest
Новая
       13

Vue Material Drawer (как отобразить file.vue внутри md-контента)

0 голосов
/ 09 февраля 2019

Итак, я пытаюсь создать веб-сайт, который содержит 4 файла.Внутри navigation.vue у меня есть временный ящик для навигации по каждому файлу vue.
(документация для временного ящика: https://vuematerial.io/components/drawer (я использую материал Vue) я использую тот же код).

внутри моего ящика у меня есть панель инструментов md, mdтеги -drawer и md-content (в которых создается мое навигационное меню:

Итак, мне было интересно, есть ли способ загрузить один из моих шаблонов (нажав на список элементов в md-box)в тег md-content?

1 Ответ

0 голосов
/ 09 февраля 2019

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

npm install vue-router

Пример фрагмента кода для App.vue или где вы хотите отобразить ваши файлы .vue: 

<template>
<v-app>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</v-app>
</template>

Пример фрагмента кода для файла rout.js или где вы будете регистрировать свои маршруты: 

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.

// 1. Define route components.
// These can be imported from other files
import Home from './path/to/Home';
import Something1 from './path/to/Something1';
import Something2 from './path/to/Something2';

const routes = [
  {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/something1',
        name: 'Something1',
        component: Something1
    },
    {
        path: '/something2',
        name: 'Something2',
        component: Something2
    },
]

// 3. Create the router instance and pass the `routes` option
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

// Now the app has started!

Вы должны поместить каждый из параметров md в vue-router-link вот так: 

    <md-drawer :md-active.sync="showNavigation">
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">My App name</span>
      </md-toolbar>

      <md-list>
        <md-list-item>
          <!-- use router-link component for navigation. -->
          <!-- specify the link by passing the `to` prop. -->
          <!-- replace "/foo" and "/bar" with your route path (e.g., "/home", "/something1", "/something2") -->
          <router-link to="/foo">
            <md-icon>move_to_inbox</md-icon>
            <span class="md-list-item-text">Inbox</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/bar">
            <md-icon>send</md-icon>
            <span class="md-list-item-text">Sent Mail</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/foo">
            <md-icon>delete</md-icon>
            <span class="md-list-item-text">Trash</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/bar">
            <md-icon>error</md-icon>
            <span class="md-list-item-text">Spam</span>
          </router-link>
          </md-list-item>
      </md-list>
    </md-drawer>

Подробнее о vue-router можно узнать здесь: Документация по Vue Router :

Не стесняйтесь высказать свой ответ, если он помогвы.Надеюсь это поможет!:)

...