这是我的路由:
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
这是我的html
代码:
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
href
属性的开头是个#
号,当带着这个#
号的时候,路由是正常工作的。如果去掉#
号,路由就找不到路径了:
Not found
当我使用vuejs
和vue-router
的时候,这是我的路由:
var router = new VueRouter();
router.map({
"/": {
component: phoneList
},
"/phones": {
component: phoneList
},
"/phones/:phoneId": {
component: {
template: 'TBD: detail view for <span>{{$route.params.phoneId}}</span>',
}
}
});
router.start(app, "#app");
这是html
:
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
同样的,带着#
号路由正常工作,去掉就:
Cannot GET /phones/motorola-xoom-with-wi-fi
为什么会这样?这个#
号到底有什么作用?
为什么http://localhost:8000/phones/motorola-xoom
就不能识别,http://localhost:8000/app/index.html#/phones/motorola-xoom
就能识别出来?
웹 앱은 URL을 통해 다양한 상태를 식별해야 합니다. 다양한 상태는 다양한 URL에 해당하므로 앞으로 및 뒤로 이동하고 북마크를 저장하는 데 편리합니다.
새로운 History API는그러나 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는 두 가지 상태를 나타낼 수 있으며 전환 시 페이지가 새로 고쳐지지 않습니다.#
를 제거할 수 있지만 서버는 대체 버전을 제공해야 하므로 여기서는 자세히 다루지 않겠습니다. 🎜먼저 프론트엔드 라우팅에 대한 기본 지식, 즉 onHashChange, pushState 등 가장 기본적인 내용을 배우고, 사용하기 전에 소규모 경로를 직접 작성해 보세요!
배우지 않더라도 공식 문서를 주의깊고 완전하게 읽으세요. 공식 예제는 매우 명확합니다!
으아악
Vue는 라우팅 모드를 html5 모드로 구성합니다. 공식 문서에는 언급되어 있지만 작성 방법은 나와 있지 않습니다
해시 걱정할 필요가 없도록 html에서는 v-link="{path : '/phones'}"를 사용하는 것이 좋습니다
프론트엔드가 라우팅을 구현하는 방식입니다. #백엔드는 해시라고도 하는데 실제로는 앵커 포인트와 비슷하다고 생각하시면 됩니다. 더 나은 경험을 위한 것이므로 계속해서 돌아갈 수 있습니다.
Baidu에서 앵커 링크를 다운로드한 다음 Anglejs 및 vuejs 문서를 읽어보세요. 형제님