使用 Vue Router 构建多页面 Chrome 浏览器扩展

14次阅读

本文将介绍如何使用 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 应用中。

多面鹅

面向求职者的AI面试平台

25

查看详情

// 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 目录中。