Vue.js Can´;t在Vue中导入路由链接组件
我尝试使用vue路由器创建路由。App.js代码看起来 JS VUE(Vuetify)Vue.js Can´;t在Vue中导入路由链接组件,vue.js,vue-router,Vue.js,Vue Router,我尝试使用vue路由器创建路由。App.js代码看起来 JS VUE(Vuetify) mdi主页 校长 通道 带项目符号的mdi格式列表 利斯塔多 康塔多斯 带项目符号的mdi格式列表 利斯塔多 洛拉旺 mdi账户圈 mdi出口runSalir 去康塔多利斯| 转到网关 {{new Date().getFullYear()}} 版本2.0 导出默认值{ 道具:{ 资料来源:String }, 数据:()=>({ 商品:[“Foo”、“Bar”、“Fizz”、“Buzz”], 出票人:空 })
mdi主页
校长
通道
带项目符号的mdi格式列表
利斯塔多
康塔多斯
带项目符号的mdi格式列表
利斯塔多
洛拉旺
mdi账户圈
mdi出口runSalir
去康塔多利斯|
转到网关
{{new Date().getFullYear()}}
版本2.0
导出默认值{
道具:{
资料来源:String
},
数据:()=>({
商品:[“Foo”、“Bar”、“Fizz”、“Buzz”],
出票人:空
})
};
问题:返回未知的自定义元素:路由器链接我导入VueRouter,所以我不知道什么失败了。有人看到错误吗?参数是{Object | Function}插件
您试图同时安装多个Vue插件
而不是:
Vue.use(Vuetify、VueRouter、VueI18n、Swal)代码>
做:
require("./bootstrap");
import Swal from "sweetalert2";
import VueI18n from 'vue-i18n'
import VueRouter from 'vue-router'
import Vuetify from "vuetify";
import es from "vuetify/es5/locale/es";
import en from "vuetify/es5/locale/en";
import "@mdi/font/css/materialdesignicons.css";
import ContadorComponent from "./components/ContenedorComponent.vue";
import GatewayComponent from "./components/GatewayComponent.vue";
const routes = [{
path: '/contador',
component: ContadorComponent
},
{
path: '/gateway',
component: GatewayComponent
}
]
window.Vue = require("vue");
Vue.use(Vuetify, VueRouter, VueI18n, Swal);
Vue.component(
"drawer-component",
require("./components/DrawerComponent.vue").default,
/* methods: {
changeLocale (lang) {
this.$vuetify.lang.current = lang
},
},*/
);
export default new Vuetify({
icons: {
iconfont: "mdi"
},
lang: {
locales: {
es,
en
},
current: "es"
}
});
const router = new VueRouter({
routes
})
new Vue({
vuetify: new Vuetify(),
router,
}).$mount("#app");
<template>
<v-app id="app">
<v-navigation-drawer v-model="drawer" app permanent expand-on-hover>
<v-list dense>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Principal</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-group prepend-icon="mdi-directions-fork">
<template v-slot:activator>
<v-list-item-title>Gateways</v-list-item-title>
</template>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-format-list-bulleted</v-icon>
</v-list-item-icon>
<v-list-item-title>Listado</v-list-item-title>
</v-list-item>
</v-list-group>
<v-list-group prepend-icon="mdi-speedometer">
<template v-slot:activator>
<v-list-item-title>Contadores</v-list-item-title>
</template>
<v-list-item link>
<v-list-item-icon>
<v-icon>mdi-format-list-bulleted</v-icon>
</v-list-item-icon>
<v-list-item-title>Listado</v-list-item-title>
</v-list-item>
</v-list-group>
</v-list>
</v-navigation-drawer>
<v-app-bar app elevate-on-scroll dark>
<v-toolbar-title class="d-sm-flex">LoRaWAN</v-toolbar-title>
<v-divider class="mx-4 d-sm-flex" inset vertical></v-divider>
<v-toolbar-items class="d-sm-flex">
<v-col class="d-flex" cols="3" sm="6">
<v-select :items="items" label="Instalaciones" dense outlined></v-select>
</v-col>
<v-col class="d-flex" cols="3" sm="6">
<v-select :items="items" label="Agrupaciones" dense outlined></v-select>
</v-col>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-menu open-on-hover right bottom>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-account-circle</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item link>
<v-list-item-title>
<v-icon>mdi-exit-run</v-icon>Salir
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<router-link to="/contador">Go to Contadores</router-link>|
<router-link to="/gateway">Go to Gateway</router-link>
</v-row>
</v-container>
<router-view></router-view>
</v-content>
<v-footer dark app>
<span class="white--text">{{ new Date().getFullYear() }}</span>
<span class="white--text text-right">Versión 2.0</span>
</v-footer>
</v-app>
</template>
<script>
export default {
props: {
source: String
},
data: () => ({
items: ["Foo", "Bar", "Fizz", "Buzz"],
drawer: null
})
};
</script>
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(Swal);