gpt4 book ai didi

vue.js - vue-router 应该在点击时路由,不工作

转载 作者:行者123 更新时间:2023-12-03 06:41:25 25 4
gpt4 key购买 nike

我正在尝试创建一个导航,当有人点击时。它应该导航到另一个 Vue.component。

注意:这个应用程序是基于 Electron+Vue 的,但它应该像普通的 Vue 项目一样工作,因为我也在其他 Electron+Vue 项目中尝试过相同的概念。

现在由于路由器错误,它没有显示任何内容。我错过了什么吗?

Error Shows like this in Screenshot

===================================

----HelloWorld.vue-----

<template>
<div class="collapse navbar-collapse nav-item-outer" id="navbarNav">
<ul class="nav navbar-nav nav-list">
<li class="nav-item active" @click="navigate('information')">
<span class="nav-item-icon nav-item-icon-info"></span>
<span class="nav-item-title">Info</span>
</li>
<li class="nav-item" @click="navigate('map')">
<span class="nav-item-icon nav-item-icon-location"></span>
<span class="nav-item-title">Location</span>
</li>
<li class="nav-item" @click="navigate('videocontent')">
<span class="nav-item-icon nav-item-icon-video"></span>
<span class="nav-item-title">Video</span>
</li>
<li class="nav-item" @click="navigate('surfstation')">
<span class="nav-item-icon nav-item-icon-surf"></span>
<span class="nav-item-title">Surf</span>
</li>
<li class="nav-item" @click="navigate('telephone')">
<span class="nav-item-icon nav-item-icon-telephone"></span>
<span class="nav-item-title">Telefon</span>
</li>
<li class="nav-item" @click="navigate('/')">
<span class="nav-item-icon nav-item-icon-home"></span>
<span class="nav-item-title">Home</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
methods: {
navigate(route) {
this.$router.push(route)
},
}
}
</script>

============================================= ====

----main.js--------

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
Vue.use(VueRouter)




export default new VueRouter({
routes: [
{
path: '/',
name: 'dashboard',

component: require('@/views/Dashboard').default
},
{
path: '/information',
name: 'information',

component: require('@/views/Information').default
},
{
path: '/map',
name: 'map',

component: require('@/views/Map').default
},
{
path: '/surfstation',
name: 'surfstation',

component: require('@/views/Surfstation').default
},
{
path: '/telephone',
name: 'telephone',

component: require('@/views/Telephone').default
},
{
path: '/videocontent',
name: 'videocontent',

component: require('@/views/VideoContent').default
},
{
path: '*',
redirect: '/'
}
]
})



new Vue({
render: function (h) { return h(App) },
}).$mount('#app')

============================================= ======

----App.vue------

<template>
<div id="app">

<HelloWorld msg="Welcome to Your Vue.js App"/>
<main>
<router-view></router-view>
</main>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
name: 'App',
components: {
HelloWorld
}
}
</script>

我们将不胜感激。

最佳答案

不是导出路由器,而是放入一个常量并在 new Vue({

主.js

const router = new VueRouter({
routes: [
...
],
// Prevent white screen on reload (in production build)
mode: process.env.IS_ELECTRON ? 'hash' : 'history'
})


new Vue({
router,
render: h => h(App),
mounted () {
// Prevent white screen when the app is launched (in production build)
this.$router.push('/').catch(error => { })
}
}).$mount('#app')

关于vue.js - vue-router 应该在点击时路由,不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61816567/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com