时间戳

首页 > 解决方案 > 如何在 Electron 协议中使用 VueJS 路由器切换页面？

vue.js - 如何在 Electron 协议中使用 VueJS 路由器切换页面？

问题描述

https://i.imgur.com/04J5AIy.png

CN: 就像这张图，我正在用一个 Electron 来做一个浏览器。我使用 VueJS，Vue 路由器。现在我想实现 chrome://version/ 例如 Chrome 浏览器。

CN: 显示，我在电子制作浏览器中使用了一些vue，vue现在想响应chrome://version/的效果，但是遇到了这样的问题</p>

CN: 看了很久的electron文档，还是无法完成这个功能，尝试注册registerHttpProtocol，我的index.html是作为html发送到webview的，我的js也发送了和index.html一样的内容。 html

CN: 我电子文档的注册协议大多数情况都是返回了index.html的内容被当做html没有被webview解析，更多的情况是js返回了index.html的内容</p> 

import Vue from 'vue';
import Router from 'vue-router';

import constant from '../../constant';

Vue.use(Router);

export default new Router({
  mode: 'hash',
  base: __dirname,
  routes: [
    {
      path: '/',
      name: 'browser',
      component: require('@/components/BrowserPage').default,
      meta: {
        title: constant.config.productName,
        icon: 'static/icon/browser.png',
      },
    },
    {
      path: '/browser',
      name: 'private',
      component: require('@/components/PrivatePage').default,
      children: [
        {
          path: 'setting',
          component: require(/* webpackChunkName: "setting" */'@/components/PrivatePage/Setting').default,
          meta: {
            title: '设置',
            icon: 'static/icon/setting.png',
          },
        },
      ],
      meta: {
        title: 'Loading...',
        icon: 'static/icon/loading.png',
      },
    },
    {
      path: '*',
      redirect: '/',
    },
  ],
});

Normal should be / 正常地址应该是这样的

地址 #### 实际地址

browser://index  #### file://${__dirname}/index.html

browser://setting #### file://${__dirname}/index.html#/setting

browser://bookmark #### file://${__dirname}/index.html#/bookmark

browser://history #### file://${__dirname}/index.html#/history

browser://index/css/style.css #### file://${__dirname}/css/style.css

browser://index/js/vender.js #### file://${__dirname}/js/vender.js

browser://index/images/login.png #### file://${__dirname}/images/login.png

其实地址是/地址应该是这样的

地址 #### 实际地址

browser://index  #### file://${__dirname}/index.html

browser://setting #### file://${__dirname}/index.html

browser://bookmark #### file://${__dirname}/index.html

browser://history #### file://${__dirname}/index.html

browser://index/css/style.css #### file://${__dirname}/index.html

browser://index/js/vender.js #### file://${__dirname}/index.html

browser://index/images/login.png #### file://${__dirname}/index.html

地址可能有两种情况

const winURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:9080/index.html'
  : `file://${__dirname}/index.html`;

CN: 怎样才能正常实现这个功能？如何结合elelctron协议和vue router，让静态资源正常加载？

CN: 我该怎么正常的这个功能呢？

标签： vue.js

解决方案

导入 router.js 并使用push方法怎么样？

像这样的东西：

import router from './router.js';

router.push('/myroute');

推荐阅读