我正在使用Vue.js开发一个Chrome扩展程序。在我想要使用路由的部分之前,一切都正常运作。
当我使用以下路由设置时,在我的本地开发服务器上,即localhost:8080/,这不是一个问题:
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,
});
首页.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扩展程序有一些特殊的路径行为。
在这里,您可以看到Chrome具有额外的/index.html路径。
然后我尝试了以下内容:
const routes = [
{path: '/' + chrome.runtime.id + '/index.html', component: App},
{path: '/' + chrome.runtime.id + '/option', component: OptionComponent},
];
没有帮助。更改为/index
和/
也没有帮助......最后一次尝试是明确告知协议:
{path: 'chrome-extension://' + chrome.runtime.id + '/', component: App},
同样没什么运气。 我猜VueRouter只对http://协议的URL起作用。
如果有人有想法如何解决这个问题,我会非常感激!
path:'/index.html'
。 - wOxxOm{ path: 'index.html/', component: App },
但是同样没有成功。 - xetra11