Chrome 확장 프로그램에 풍부한 웹 앱 환경을 추가하는 훌륭한 기능을 만드는 방법에 대한 이전 게시물에 이어 라우팅은 사실상 전체 Vue 생태계의 빵과 버터의 일부입니다.

설정하기

Vue-Vite Chrome 확장 프로그램이 아직 작동하지 않는 경우 이전 게시물의 단계를 따르기만 하면 됩니다.

For an easy way to get set up with Vue, Vite and Vue-Router simply use npm init vue@latest
This command will install and execute create-vue, which is the official Vue project scaffolding tool. You will be presented with prompts for a number of optional features including adding Vue-Router from the get go. I would personally recommend this and then bolting on the CRXJS Plugin afterwards, or feel free to follow the steps below

Vue 라우터 설치

설치vue-router

npm install vue-router@4

앱에 보기 추가

모든 Vue를 저장할 views 폴더를 만드세요... 👀🤣

앱에 라우터 추가

라우터 폴더 추가

/src 폴더에서 router 폴더를 생성한 다음 index.js라는 파일을 생성했습니다.
router/index.js 파일 내부에 다음을 추가합니다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/AboutView.vue')
        },
        {
            path: '/contact',
            name: 'contact',
            component: () => import('../views/ContactView.vue')
        }
    ]
});

// Redirects route from index.html to '/' when initially load Extension
router.beforeEach((to) => {
    if(to.path === "/index.html") return '/';
});
export default router;

main.js 업데이트

main.js에서 라우터를 포함하도록 업데이트합니다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router).mount('#app');

업데이트하기

마지막 단계는 RouterLink 및 RouterView를 포함하도록 App.vue를 업데이트하는 것입니다.

<script setup>
    import { RouterLink, RouterView } from 'vue-router'
    import HelloWorld from '@/components/HelloWorld.vue'
</script>

<template>
    <header>
        <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

        <div class="wrapper">
            <HelloWorld msg="You did it!" />

            <nav>
                <RouterLink to="/">Home</RouterLink>
                <RouterLink to="/about">About</RouterLink>
                <RouterLink to="/contact">Contact</RouterLink>
            </nav>
        </div>
    </header>
    <RouterView />
</template>

... 완료! Vue Chrome 확장 프로그램에 간단한 라우팅을 추가하면 됩니다.
npm init vue@latest를 사용하여 Vue를 설치한 경우 초기 또는 홈 보기는 다음과 같아야 합니다.



정보 또는 연락처 링크를 클릭하면 보기가 적절하게 변경됩니다.
에 대한


연락하다


옵션 또는 팝업 보기를 볼 때 Chrome은 항상/index.html을 URL로 로드하려고 시도합니다. router/index.js의 스니펫

router.beforeEach((to) => {
    if(to.path === "/index.html") return '/';
});

초기 로드 시 경로가 실제로index.html인 경우 루트 페이지(이 경우 'HomeView'

모든 공로 및 그의CRXJS Plugin

모든 코드는 내GitHub repo에 있습니다.