質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

パス

パス(path)はファイルシステムの場所(階層)を明示したものです。

Q&A

解決済

1回答

1115閲覧

BrowserWindowでloadURLをするときにvue-routerのパスで表示したい

yoshi448

総合スコア17

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

パス

パス(path)はファイルシステムの場所(階層)を明示したものです。

0グッド

0クリップ

投稿2020/11/05 06:10

編集2020/11/05 11:25

お世話になっております。
Electron初心者です。
現在elecrton-builderを使ったelectron+vueで開発をしていて、ボタンを押すと新しいウィンドが表示されるようなコードを書いているのですが表示されるはずのページでvue-routerのaboutを表示したいのに読み込めていません。
どのようにパスを読み込めば良いのでしょうか?
よろしくお願いいたします。

現在のディレクトリ構成
現在のディレクトリ
本当は右のウィンドウでaboutのページを表示したいです。
今の状況

javascript

1//background.js 2let transparentWnd 3 4async function createWindow() { 5 // Create the browser window. 6 const win = new BrowserWindow({ 7 width: 800, 8 height: 600, 9 webPreferences: { 10 // Use pluginOptions.nodeIntegration, leave this alone 11 // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info 12 nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION 13 } 14 }); 15 16 transparentWnd = new BrowserWindow({ 17 width: 400, 18 height:400, 19 show:false, 20 transparent:true, 21 frame:true, 22 webPreferences:{ 23 nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION 24 } 25 }) 26 if (process.env.WEBPACK_DEV_SERVER_URL) { 27 // Load the url of the dev server if in development mode 28 await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL); 29 if (!process.env.IS_TEST) win.webContents.openDevTools(); 30 //おそらくここが変なのだと思います。 31 transparentWnd.loadURL(process.env.WEBPACK_DEV_SERVER_URL+"#/about") 32 } else { 33 createProtocol("app"); 34 // Load the index.html when not in development 35 win.loadURL("app://./index.html"); 36 } 37}

javascript

1//vue-router 2import { createRouter, createWebHistory } from "vue-router"; 3import Home from "../views/Home.vue"; 4 5const routes = [ 6 { 7 path: "/", 8 name: "Home", 9 component: Home 10 }, 11 { 12 path: "/about", 13 name: "about", 14 // route level code-splitting 15 // this generates a separate chunk (about.[hash].js) for this route 16 // which is lazy-loaded when the route is visited. 17 component: () => 18 import(/* webpackChunkName: "about" */ "../views/About.vue") 19 } 20]; 21 22const router = createRouter({ 23 history: createWebHistory(process.env.BASE_URL), 24 routes 25}); 26 27export default router;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

原因はrouterがhistoryモードになっていることでした。
なのでvue-routerのindex.jsをhashモードに切り替えることで解決しました。

投稿2020/11/06 05:00

yoshi448

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問