vue-router 应该在点击时路由，不工作

Posted 2023-02-22

【中文标题】vue-router 应该在点击时路由，不工作

【英文标题】：vue-router should route on click, not working

【发布时间】：2020-09-01 02:55:00

【问题描述】：

我正在尝试创建导航以及当有人点击时。它应该导航到另一个 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>

我们将不胜感激。

【问题讨论】：

错误：[Vue 警告]：渲染错误：“TypeError：无法读取未定义的“匹配”属性”

【参考方案1】：

不要导出路由器，而是放入一个const并在new Vue(中指定它

main.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')