vue 주소에 파운드 기호가 있는 이유에 대해 이야기해 보겠습니다.

URL에 파운드 기호(#)를 사용하면 앵커 위치 지정 및 페이지 이동이 가능하며 Vue에서도 특별한 목적이 있습니다. 그렇다면 Vue 주소에도 파운드 기호가 나타나는 이유는 무엇일까요?

1. Vue 라우팅의 파운드 기호

Vue는 단일 페이지 애플리케이션의 라우팅 전환을 구현하기 위해 Vue-router 라우팅을 도입하여 URL을 구성 요소에 매핑합니다. , URL이 변경되면 페이지가 다시 로드되지 않고 구성 요소의 콘텐츠만 변경됩니다. Vue-router에서는 파운드 기호(#)가 라우팅 경로의 구분 기호로 사용되며 다음 내용은 라우팅 경로를 나타냅니다. 예:

http://www.example.com/#/home

2. 브라우저 페이지 새로 고침 문제 해결

사용 시 Vue-router 가장 일반적인 문제는 사용자가 브라우저 주소 표시줄에 라우팅 경로를 직접 입력하거나 페이지를 새로 고칠 때 404 오류 또는 빈 페이지가 나타나는 것입니다. 단일 페이지 애플리케이션에는 HTML 파일이 하나만 있고 전체 애플리케이션의 콘텐츠가 동적으로 렌더링되며 브라우저를 새로 고치면 서버가 URL을 인식할 수 없어 404 오류가 반환되기 때문입니다. 아니면 빈 페이지.

이 문제를 해결하는 방법은 서버 측에서 URL 재작성을 수행하고 모든 URL 요청이 애플리케이션의 항목 파일(index.html)을 가리키도록 하는 것입니다. 이러한 방식으로 사용자가 라우팅 경로를 입력하거나 페이지를 새로 고치면 서버는 항목 파일을 올바르게 반환할 수 있으며 Vue-router는 URL을 구문 분석하고 해당 구성 요소를 표시합니다.

그러나 점프를 완료하기 위해 라우팅 경로를 직접 사용하는 경우 브라우저가 링크를 요청으로 구문 분석하여 해당 리소스를 찾을 수 없는 문제가 발생합니다. 예:

<a href="/home">首页</a>

이를 방지하려면 상황에서는 해시 URL을 사용하여 라우팅 점프를 구현할 수 있습니다:

<router-link to="#/home">首页</router-link>

3. 점프 페이지의 부드러운 스크롤 구현

단일 페이지 애플리케이션에서는 Vue-router에서 페이지 간 부드러운 스크롤을 구현해야 하는 경우가 많습니다. 해시 표시가 있는 URL로 이동하여 라우팅 변경 사항을 수신할 수 있습니다. 예:

<router-link to="#/home">首页</router-link>

const vueRouter = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        }
    ]
});

vueRouter.afterEach(() => {
    window.scrollTo(0, 0);
});

위 코드는 #home 경로로 점프할 때 페이지가 부드럽게 맨 위로 스크롤된다는 것을 인식합니다.

요약

Vue에서 파운드 기호는 Vue 라우팅의 요소 중 하나이며 라우팅 경로를 분리하고 점프하는 데 사용됩니다. 또한 브라우저가 페이지를 새로 고치는 문제를 해결하고 원활한 페이지 점프를 달성하는 데에도 사용할 수 있습니다. 스크롤. 따라서 Vue에서는 파운드 기호가 특별한 역할을 합니다.

위 내용은 vue 주소에 파운드 기호가 있는 이유에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!