내 경로는 다음과 같습니다.
으아악내 html코드는 다음과 같습니다.
href 속성은 # 번호로 시작합니다. 이 # 번호가 포함되면 라우팅이 정상적으로 작동합니다. # 번호를 제거하면 경로에서
vuejs과 vue-router을 사용할 때 내 경로는 다음과 같습니다.
여기는 html:
마찬가지로 # 번호를 사용한 라우팅은 정상적으로 작동합니다.
왜 이런 일이 일어나는 걸까요? 이 # 번호의 역할은 정확히 무엇인가요?
http://localhost:8000/phones/motorola-xoom은 인식되지 않지만 http://localhost:8000/app/index.html#/phones/motorola-xoom은 인식되는 이유는 무엇인가요?
ringa_lee2017-05-15 17:01:24
웹 앱은 URL을 통해 다양한 상태를 식별해야 합니다. 다양한 상태는 다양한 URL에 해당하므로 앞으로 및 뒤로 이동하고 북마크를 저장하는 데 편리합니다.
그러나 Web Apps의 사용자 경험을 보장하기 위해 페이지 상태 전환은 일반적으로 ajax를 통해 달성되는 페이지를 새로 고치지 않습니다.
기존 Ajax는 주소 표시줄에 영향을 주지 않습니다(요청은 새 URL을 요청하는 것이 아니라 XHR 개체를 통해 완료됨). 따라서 URL이 다른 페이지 상태에 해당하도록 하려면 어떻게 해야 할까요? windows.location과 같은 메소드는 전체 페이지를 새로 고칩니다. windows.location之类的方法是会刷新整个页面的。
这就需要用到传统的#了。锚点这东西本来是让你在当前页面的不同部分移动的，支持前进后退和保存书签，于是就被拿来应用在Web App的路由中。这样www.example.com/index.html#phones 和www.example.com/index.html#users 就能表示两个状态，而且转换不会刷新页面。
新的History API可以把#이를 위해서는 전통적인 #를 사용해야 합니다. 앵커 포인트는 원래 현재 페이지의 여러 부분 사이를 이동할 수 있게 해 주고 앞으로 및 뒤로 지원하고 북마크를 저장하므로 Web Apps 라우팅에 사용되었습니다. 이러한 방식으로 www.example.com/index.html#phones 및 www.example.com/index.html#users는 두 가지 상태를 나타낼 수 있으며 전환 시 페이지가 새로 고쳐지지 않습니다.
#를 제거할 수 있지만 서버는 대체 버전을 제공해야 하므로 여기서는 자세히 다루지 않겠습니다. 🎜
巴扎黑2017-05-15 17:01:24
먼저 프론트엔드 라우팅에 대한 기본 지식, 즉 onHashChange, pushState 등 가장 기본적인 내용을 배우고, 사용하기 전에 소규모 경로를 직접 작성해 보세요!
배우지 않더라도 공식 문서를 주의깊고 완전하게 읽으세요. 공식 예제는 매우 명확합니다!
巴扎黑2017-05-15 17:01:24
프론트엔드가 라우팅을 구현하는 방식입니다. #백엔드는 해시라고도 하는데 실제로는 앵커 포인트와 비슷하다고 생각하시면 됩니다. 더 나은 경험을 위한 것이므로 계속해서 돌아갈 수 있습니다.