在Chrome扩展程序中使用VueRouter和Vue.js-路径段问题 [英] use VueRouter and Vue.js in Chrome Extension - Issues with path segments
问题描述
我使用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-路径段问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
