Vue 2.0 Simple Routing Example
A simple example of routing with Vue 2.0 without using vue-router. This branch uses the raw HTML5 History API. For an example integrating a 3rd-party routing solution, see the pagejs branch.
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
For a detailed explanation of the build process, read the docs for vue-loader.
Principle
標籤<a>
綁定監聽事件,點擊後獲取href
屬性,修改根實例
的currentRoute
屬性,利用window.history.pushState
修改瀏覽器網址,同時觸發渲染函數render()
,渲染計算屬性computed
後的組件。
Reference
pushState和replaceState是一個HTML5的新接口,他們的作用非常大,可以做到改變網址卻不需要刷新頁面,這個特性後來用到了單頁面應用中比如:vue-router,react-router-dom裏面.