Skip to main content

路由

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>