Использование vue-router с компонентами vuetify - PullRequest
Новая
       18

Использование vue-router с компонентами vuetify

0 голосов
/ 23 мая 2019

Я создал проект vue с помощью команды vue ui вместе с плагином vue-cli-plugin-vuetify.По умолчанию он содержит компоненты Home и About vue в папке src/views с заданными маршрутами в файле src/router.js.И в файле src/App.vue есть этот простой код 

<template>
<div>
    <div>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

, маршруты которого работают должным образом, но когда я заменяю src/App.vue компонентом v-панели инструментов vuetify, как показано ниже, маршруты не работают вообще.

<v-app id="inspire">
<v-toolbar>
  <v-toolbar-side-icon></v-toolbar-side-icon>
  <v-toolbar-title>Gift Shop</v-toolbar-title>
  <v-spacer></v-spacer>
  <v-toolbar-items class="hidden-sm-and-down">
    <v-btn flat to="/">Home</v-btn>
    <v-btn flat to="/about">About</v-btn>
    <v-btn flat>Link Three</v-btn>
  </v-toolbar-items>
</v-toolbar>
</v-app>

src/router.js файл 

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

src/main.js файл 

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

src/plugins/vuetify.js файл 

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

Как можноя исправить маршруты, не работающие в vuetify компонент проблемы?Любая помощь будет оценена!

...