this.$router.push 在电子 vue 中不起作用答案

【问题标题】：this.$router.push is not working in electron-vuethis.$router.push 在电子 vue 中不起作用
【发布时间】：2022-08-03 19:16:43
【问题描述】：

我刚开始研究电子vue，我正在设置vue-router，但它似乎不起作用，甚至没有显示任何错误。

这是我的代码：

main.js

import { createApp } from \'vue\'
import App from \'./App.vue\'

import {createRouter, createWebHashHistory, createWebHistory} from \"vue-router\"
import test from \"./components/test\";


const router=createRouter({
    history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(),
    routes:[
        {path:\'/test\',name:\"test\",component:test}
    ]
})

const vue=createApp(App)
vue.use(router)
vue.mount(\'#app\')

应用程序.vue：

<template>
  <img alt=\"Vue logo\" src=\"./assets/logo.png\">
  <HelloWorld msg=\"Welcome to Your Vue.js App\"/>
  <button @click=\"click\">test</button>
</template>

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



import {getAuth, signInWithEmailAndPassword} from \"firebase/auth\"
export default {
  name: \'App\',
  components: {
    HelloWorld
  },
  methods:{
    click(){
      console.log(`2`)
      this.$router.push(\"/test/\")
    }
  }
}
</script>

组件/test.vue：

<template>
  <div></div>
</template>

<script>
export default {
  name: \"test\"
}
</script>

<style scoped>

</style>

我还没有触及其他文件，如 background.js，我认为这与问题无关。

你找到解决办法了吗？遇到同样的问题。
对于我的问题，问题是我忘记在 App.vue 中添加 <router-view>

标签： vue.js electron electron-vue

【解决方案1】：

如果 Vue 路由器找不到路由，则无法重定向。那时你可以看到控制台错误。但我建议您使用路由名称而不是路由路径。所以，

this.$router.push({name: 'test'});

这很有用。因为有一天你的网址可能会改变

【讨论】：

正如我在问题中提到的，我在控制台中看不到任何错误。我确实测试了你的代码，但它没有工作。当我单击按钮时，我可以在控制台中看到数字 2，这意味着该方法已执行。

【解决方案2】：

我忘记在我的 App.vue 文件中添加 <router-view>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <router-view></router-view>
  <button @click="click">test</button>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'
  import {getAuth, signInWithEmailAndPassword} from "firebase/auth"
  export default {
    name: 'App',
    components: {
      HelloWorld
    },
    methods:{
      click(){
        console.log(`2`)
        this.$router.push("/test/")
      }
    }
  }
</script>

【讨论】：