路由
#
basic hash router当 url 是 #foo 时展示foo
组件,当 url 是 #bar 时展示bar
组件。
- 取到当前的 hash
window.location.hash
- 监听 hash 改变
window.addEventListener('hashchange', () => {})
执行依赖vue环境
<div id="app"> <component :is="url"></component> <a @click="routeTo('#foo')" href="#foo">foo</a> <a @click="routeTo('#bar')" href="#bar">bar</a></div>
<script> window.addEventListener("hashchange", () => { app.url = window.location.hash.slice(1); });
const app = new Vue({ el: "#app", data: { url: "foo", }, components: { foo: { template: `<div>foo</div>` }, bar: { template: `<div>bar</div>` }, }, methods: { routeTo(route) { window.location.hash = route; }, }, });</script>