Question

我已经使用vue ui命令和vue-cli-plugin-vuetify插件创建了一个vue项目。默认情况下，它在src/views文件夹中具有Home和About vue组件，并在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>

哪些路由按预期运行，但是当我用vuetify v-toolbar组件替换src/App.vue时，如下所示的路由根本不起作用。

<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组件问题中不起作用的路由？任何帮助，将不胜感激！

将vue-router与vuetify组件一起使用

0 个答案: