在Chrome扩展程序中使用VueRouter和Vue.js-路径段问题 | 在Chrome扩展程序中使用VueRouter和Vue

本文介绍了在Chrome扩展程序中使用VueRouter和Vue.js-路径段问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用Vue.js开发了chrome扩展程序。可以正常工作，直到我想使用路由时为止。

I developing a chrome extension with Vue.js. Works fine until I hit the part when I want to use routing.

在我有 localhost：8080 / 的本地开发服务器上，这是使用以下路由设置时不是问题：

On my local developing server where I have localhost:8080/ this is not a problem when using following routing setup:

main.js

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import OptionComponent from "./OptionComponent.vue";

const routes = [
  { path: '/', component: App },
  { path: '/option', component: OptionComponent },
];

Vue.use(VueRouter); // This makes all the magic hapen and Vue recognizes the router-view and router-link

const router = new VueRouter({
  routes,
});

new Vue({
  el: '#app',
  router,
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CM Server Descriptor</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="libs/crypt.js"></script>
    <script src="libs/jquery.js"></script>
    <script src="libs/aja.min.js"></script>
    <script src="libs/JSLINQ.js"></script>
    <script src="js/build.js"></script>
  </body>
</html>

当我部署到Chrome扩展程序并开始对其进行测试时，没有任何反应。
我发现chrome扩展名具有某些特殊的路径行为。

When I deploy to my Chrome-Extension and start testing it there nothing happens.I figured out that the chrome extension has some special path behaviours.

在这里您可以看到chrome的路径为 /index.html ，这是此处的额外路径。

Here you can see that chrome has the path /index.html which is extra extra here.

然后，我尝试以下操作：

What I then tried is the following:

const routes = [
  {path: '/' + chrome.runtime.id + '/index.html', component: App},
  {path: '/' + chrome.runtime.id + '/option', component: OptionComponent},
];

没有帮助。更改为 / index 和 / 还是没有帮助...
最后一次尝试是试图明确地告诉协议：

Did not helped. Changing to /index and / did not helped either...Last try was trying to explicitely telling the protocol:

  {path: 'chrome-extension://' + chrome.runtime.id + '/', component: App},

也没有运气。
我认为VueRouter仅作用于 http：// 协议网址。

No luck as well.I assume that VueRouter only acts on http:// protocol urls.

如果有人知道如何解决此问题我会非常感激！

If anybody has an idea how to get around this I'd be very thankful!

推荐答案

我遇到了同样的问题，终于解决了。已经一年了，所以不确定是用chrome还是Vue修复的。

I had the same issue and I finally fixed it. It has been a year so not sure if it was fixed by chrome or Vue.

无论如何，我会为这里的新人写下来：

Anyway, I'll write down for anyone new to here:

基于文件夹结构的Chrome传递URL且没有隐式URL解析。这意味着 / 不会重定向到 index.html 。因此解决方案是：

Chrome pass URL based on folder structure and no implicit URL resolution. It means / won't redirect to index.html. So the solution is:

为 index.html ：

Either add a path for index.html:

{ path: '/index.html', component: App },

  ，或者为您的应用添加路径，并在加载时手动推送到该应用。 
//router.js
{ path: '/app', component: App },

 
 
文件 App.vue  
created(){
    this.$router.push('app');
}
请记住，路由路径需要与Chrome扩展程序中的相对路径完全匹配根。因此，如果将 index.html 放在扩展根中，则Vue  baseUrl 必须为 /  
And remember the routing path needs to exactly match the relative path in your chrome extension root. So if you put index.html in extension root, your Vue baseUrl must be /
                        这篇关于在Chrome扩展程序中使用VueRouter和Vue.js-路径段问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！