在 Chrome 扩展中使用 VueRouter 和 Vue.js - 路径段问题
xet*_*a11 7 javascript routing google-chrome-extension vue.js vue-router
我用 Vue.js 开发了一个 chrome 扩展。工作正常，直到我想使用路由时击中零件。
在我有localhost:8080/ 的本地开发服务器上，使用以下路由设置时这不是问题：
主文件
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://协议网址。
如果有人知道如何解决这个问题，我将非常感激！
我有同样的问题，我终于解决了。已经一年了，所以不确定它是由 chrome 还是 Vue 修复的。
无论如何，我会写给任何新来的人：
Chrome 基于文件夹结构传递 URL，没有隐式 URL 解析。这意味着/不会重定向到index.html. 所以解决办法是：
添加路径
index.html：
Run Code Online (Sandbox Code Playgroud){ path: '/index.html', component: App },或者为您的应用添加路径并在加载时手动推送。
Run Code Online (Sandbox Code Playgroud)//router.js { path: '/app', component: App },
文件 App.vue
created(){
this.$router.push('app');
}
请记住，路由路径需要与 chrome 扩展根目录中的相对路径完全匹配。所以如果你放入index.html扩展根目录，你的 VuebaseUrl必须是/
Chrome 指向您在 mainfest 中注册的 popup.html 文件，然后您的路由器将找不到该文件。
将基本 url 设置为 popup.html（取决于它相对于 mainfest.json 的位置）可以解决它
const router = new VueRouter({
base: '/popup/popup.html',
mode: 'history',
routes,
});
小智 -2
Chrome 扩展程序必须遵守 CSP（内容安全策略），因此您不能使用 Vue 2，因为它基于 eval()。
需要使用CSP版本的Vue和Vue-router 1.0版本来配合：
Vue 1.0-csp
https://github.com/vuejs/vue/tree/1.0-csp
Vue-路由器 1.0
https://github.com/vuejs/vue-router/tree/1.0
- 这个答案是无关紧要的，而且是完全错误的。-1 https://vuejs.org/v2/guide/installation.html#CSP-environments (2认同)
| 归档时间： |
|
| 查看次数： |
2109 次 |
| 最近记录： |