本文将介绍如何使用 Vue Router 在 Chrome 浏览器扩展中实现多页面应用，例如登录页面和需要登录后才能访问的页面。通过 Vue Router，可以在单个 popup 页面中进行路由跳转，根据用户登录状态显示不同的内容，避免了为每个页面创建单独 popup 的复杂性。
1. 项目初始化与配置
首先，使用 vite-plugin-web-extension 创建一个基础的 Chrome 扩展项目。确保项目能够成功加载到 Chrome 浏览器中。
yarn create vite-plugin-web-extension
2. 安装 Vue Router
在项目中安装 Vue Router：
npm install vue-router@4 # 或者 yarn add vue-router@4
3. 创建路由配置
在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.ts 文件，用于配置 Vue Router。
立即学习“前端免费学习笔记（深入）”；
// src/router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import Login from '../pages/Login.vue';
import Home from '../pages/Home.vue'; // 假设你有一个 Home 页面
const routes: RouteRecordRaw[] = [
{ path: '/', component: Home, meta: { requiresAuth: true } }, // 需要登录才能访问的 Home 页面
{ path: '/login', component: Login },
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
router.beforeEach((to, from, next) => {
const isLoggedIn = localStorage.getItem('isLoggedIn'); // 检查用户是否已登录
if (to.meta.requiresAuth && !isLoggedIn) {
// 如果需要登录且未登录，则重定向到登录页面
next('/login');
} else {
next();
}
});
export default router;代码解释：
- createWebHashHistory(): 使用 hash 模式，适用于 Chrome 扩展。
- routes: 定义路由规则，包括路径和对应的组件。
- meta: { requiresAuth: true }: 在需要登录才能访问的路由上添加元数据，用于路由守卫判断。
- router.beforeEach(): 全局前置守卫，在每次路由跳转前执行。
- localStorage.getItem('isLoggedIn'): 使用 localStorage 模拟登录状态的存储。在实际项目中，可以使用更安全的方式存储 token。
4. 修改 main.ts
在 src/popup.ts 或你的主入口文件中，引入 Vue Router 并将其安装到 Vue 应用中。
// src/popup.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');5. 修改 App.vue
在 App.vue 中使用 <router-view> 组件显示当前路由对应的组件。
<template> <router-view></router-view> </template>
6. 创建 Login.vue 和 Home.vue
创建 Login.vue 和 Home.vue 两个组件，分别用于显示登录页面和登录后的主页。
// src/pages/Login.vue
<template>
<div>
<h1>Login</h1>
<button @click="login">Login</button>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const login = () => {
// 模拟登录成功
localStorage.setItem('isLoggedIn', 'true');
router.push('/'); // 跳转到 Home 页面
};
</script>// src/pages/Home.vue
<template>
<div>
<h1>Home</h1>
<p>Welcome!</p>
<button @click="logout">Logout</button>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const logout = () => {
localStorage.removeItem('isLoggedIn');
router.push('/login'); // 跳转到 Login 页面
};
</script>7. 配置 manifest.json
确保 manifest.json 文件中配置了 popup 的 HTML 文件。
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0",
"action": {
"default_popup": "src/popup.html"
},
"permissions": [
"storage"
]
}8. 构建项目
使用 vite build 命令构建项目，并将生成的 dist 目录加载到 Chrome 浏览器中。
yarn build
注意事项：
- 安全存储： localStorage 仅用于演示目的。在实际项目中，应该使用 Chrome 扩展提供的 chrome.storage.local API 进行更安全的存储。
- 路由模式： Chrome 扩展中使用 createWebHashHistory() 路由模式。
- 权限： 需要在 manifest.json 中声明 storage 权限才能使用 chrome.storage.local API。
- 构建配置： 确保 Vite 的构建配置正确，能够将所有资源打包到 dist 目录中。
总结
通过使用 Vue Router，可以方便地在 Chrome 扩展中实现多页面应用，并根据用户状态进行路由控制。这种方式简化了扩展的开发和维护，提高了用户体验。记住，在实际项目中，要使用更安全的方式存储用户状态，并遵循 Chrome 扩展的开发规范。
